ASP.NET MVC Controls | ComponentOne
Working with Controls / Input Controls / Common Features / Styling and CSS
In This Topic
    Styling and CSS
    In This Topic

    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.