ComponentOne ASP.NET MVC Controls
Styling and CSS

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.