A set of common CSS classes is used by most of the Wijmo Input controls , this table lists the same:
Common Classes
Class |
Description |
wj-input-group |
Styles the div element containing the input text and button(s) in the control. |
wj-form-control |
Styles the HTML input element in the control. |
wj-input-group-btn |
Styles the div element containing button(s) in the control. |
.wj-btn |
Styles the button for input controls. |
wj-glyph-down |
Styles the down arrow shown in the dropdown button of the input controls (AutoComplete, ComboBox, InputColor, InputDate, InputTime, Menu). |
.wj-dropdown-panel |
Styles the host element of the dropdown displayed for the input controls. |
ListBox
Class |
Description |
wj-listbox |
Styles the div host element of the ListBox control. |
.wj-header |
Styles the div element representing GroupHeader if the grouping is enabled. |
.wj-listbox-item |
Styles the div element representing the list items. |
AutoComplete/ComboBox/InputTime/Menu/MultiSelect/MultiAutoComplete
The input controls listed in the below table use the ListBox control. Hence, the CSS classes defined for the ListBox control can be used to customize the ListBox element in these controls. This table further lists the CSS classes that are specific to these controls:
Class |
Description |
AutoComplete |
.wj-autocomplete |
Styles the div host element of the AutoComplete control. |
ComboBox |
.wj-combobox |
Styles the div host element of the ComboBox control. |
Input Time |
wj-inputtime |
Styles the div host element of the InputTime control. |
Menu |
.wj-menu |
Styles the div host element of the Menu control. |
.wj-separator |
Styles the div element representing the separator in the dropdown of Menu control. |
MultiSelect |
.wj-multiselect |
Styles the div host element of the MultiSelect control. |
MultiAutoComplete |
.wj-multi-autocomplete |
Styles the div host element of the MultiAutoCompelete control. |
.wj-token |
Styles the div element displaying the selected item. |
.wj-token-label |
Styles the text of the selected item. |
wj-token-close |
Styles the (x) button used to remove the selected item. |
Calendar
Class |
Description |
.wj-calendar |
Styles the div host element of the Calendar control. |
.wj-calendar-outer |
Styles the container div which contains the calendar elements. |
.wj-calendar-header |
Styles the Calendar header displaying the currently selected month and navigation buttons. |
.wj-month-select |
Styles the div element which represents the currently selected month. |
.wj-glyph-circle |
Styles the circle glyph icon used for navigating to today’s date. |
.wj-header |
Styles the Calendar header showing displaying days in month view and year in year view. |
.wj-calendar-month |
Styles the table showing the days for the currently selected month. |
.wj-day-today |
Styles the today’s date. |
.wj-day-weekend |
Styles the weekend days dates. |
wj-day-othermonth |
Styles the other month dates shown in current month. |
wj-calendar-year |
Styles the table showing months for current year. |
.wj-yearpicker |
Styles the table showing list of years. |
InputDate/InputDateTime
The InputDate/InputDateTime controls, implicitly use the Calendar control to display dates and the InputDateTime control even uses the ListBox control to display the list of times. Hence, the CSS classes defined for the ListBox and Calendar control can be used to customize these elements in the InputDate and InputDateTime controls. This table further lists the CSS classes that are specific to these controls.
Class |
Description |
InputDate |
.wj-inputdate |
Styles the div host element of the InputDate control. |
InputDateTime |
.wj-inputdatetime |
Styles the div host element of the InputDateTime control. |
.wj-glyph-calendar |
Styles the calendar icon displayed in the control. |
.wj-glyph-clock |
Styles the clock icon displayed in the control. |
Color Picker
Class |
Description |
.wj-colorpicker |
Styles the div host element of the ColorPicker control. |
InputColor
The InputColor uses the ColorPicker control, hence the CSS classes defined for the ColorPicker can be used to customize the ColorPicker element in the InputColor control. This table further lists the CSS classes that are specific to this control:
Class |
Description |
.wj-inputcolor |
Styles the div host element of the InputColor control. |
.wj-inputcolorbox |
Styles the div element displaying the selected color. |
InputMask/InputNumber
Class |
Description |
InputMask |
.wj-inputmask |
Styles the div host element of the InputMask control. |
InputNumber |
.wj-inputnumber |
Styles the host element of the InputNumber control. |
Popup
Class |
Description |
.wj-popup |
Styles the div host element of the Popup control. |
.wj-popup-backdrop |
Styles the div element representing the dark backdrop if the Popup is shown as modal dialog. |
.wj-dialog-header |
Styles the Popup header content and also makes the Popup draggable if the isDraggable property is set to True. |
.wj-dialog-body |
Styles the Popup body content. |
.wj-dialog-footer |
Styles the Popup footer content. |