Style Form Controls

You can style different components of a specific control using corresponding CSS selectors.

The best practice to styling a control is to define a control class name for it. The control class name serves to identify the control in the CSS file, and you can use this name as a class name and modify the control’s selectors within that class.

The following table lists all customizable controls and associated selectors that you can style using CSS.

UI Control	Selectors	Description
Identity Browser	oj-opa-cc-identity-browser-container	Specify a style for the Identity container.
	. .oj-opa-cc-identity-browser__input-search .oj-combobox-input	Specify a style for the identity input.
	.oj-opa-cc-identity-browser__input-search.oj-invalid .oj-combobox-input	Specify a style for the invalid identity input.
	.oj-opa-cc-identity-browser__input-search.oj-disabled .oj-combobox-input	Specify a style for the identity input when the control is disabled.
	.oj-combobox-open-icon	Specify a style for the Drop-Down Icon container.
	.oj-combobox-open-icon:before	Specify a new signifier instead of the default Drop-Down icon/signifier.
	.oj-opa-cc-identity-browser-container	Specify a style for the Identity container when multiple selection is enabled.
	.oj-opa-cc-identity-browser-container .oj-combobox-selected-choice	Specify a style for selected options when multiple selection is enabled.
	.oj-opa-cc-identity-browser-container .oj-combobox-selected-choice-label	Specify a style for the selected option label.
	.oj-opa-cc-identity-browser-container .oj-combobox-clear-entry:before	Specify a new signifier instead of the default Remove icon/signifier on the selected options.
Tab	.tab-container-control	Specify a style for the Tabs container.
	.tab-container-control .oj-tabbar-item	Specify a style for the tab header.
	.tab-container-control .oj-tabbar-item.oj-selected	Specify a style for the selected tab header.
	.tab-container-control .oj-tabbar-item.oj-disabled	Specify a style for the disabled tab header.
	.tab-container-control .oj-tabbar-item-label	Specify a style for the tab title.
Table	.table-container .add-row	Specify style for add button.
	.table-container .remove-row	Specify style for remove/delete button.
Repeatable section	.repeatable-control-renderer-buttons .add-row	Specify style for add button.
	.repeatable-control-renderer-buttons .remove-row	Specify style for remove/delete button.
File manager	.file-upload-control	Specify a style file picker.
	.opa-forms-file-list-renderer__label-container .oj-label.	Specify a style for file list label.
	.opa-forms-file-list-renderer__refresh-icon	Specify a style for file list refresh button.
	.opa-forms-file-list-renderer__list	Specify a style for file list view.
	.opa-forms-file-list-renderer__list-item .opa-forms-file-list-renderer__file-icon	Specify a style for list item file icon.
	.opa-forms-file-list-renderer__list-item .opa-forms-file-list-renderer__list-file-name	Specify a style for list item file name.
	.opa-forms-file-list-renderer__list-item .opa-forms-file-list-renderer__list-file-create-details	Specify a style for file list item created by and date details.
	.opa-forms-file-list-renderer__list-item .opa-forms-file-list-renderer__delete-icon	Specify a style for list item delete button.
Document understanding	.document-understanding-file-picker	Specify a style the file picker part of document understanding.
	.document-understanding-container	Specify a style for container having image and controls of document understanding.
	.document-understanding-image-container	Specify a style image preview of document understanding.
	.document-understanding-controls-container	Specify a style for document understanding controls container.
Rich text editor	proc-form-rich-text-editor .tox-tinymce	Specify style for styling the rich text editor like height and border.
Train	t.rain-overflow-wrapper .oj-train	Specify style for train container.
	.oj-train .oj-train-step-list-item	Specify style for train item.
	.oj-train-step-list-item.oj-selected	Specify style for selected train item.
	.oj-train .oj-train-button-connector	Specify style for train item button.
	.oj-train .oj-train-label	Specify style for train item label.