Telerik UI for Windows 8 HTML

This article will show and explain the HTML output and CSS classes of RadComboBox in basic scenarios (some HTML attributes have been removed for simplicity).

Basic Output

Below you can see the basic HTML output of the RadComboBox and descriptions of its elements.

HTML Copy imageCopy
<span class="t-list win-interactive">
    <span class="k-widget k-combobox k-header">
        <span class="k-dropdown-wrap k-state-default">
            <input class="k-input" placeholder="Default Placeholder">
            <span class="k-select">
                <span class="k-icon k-i-arrow-s">select</span>
            </span>
        </span>
        <input style="display: none" />
    </span>
</span>

Class/selector name

Description

.t-list

The RadComboBox wrapper element. This is the element that is passed in the control's constructor.

.k-combobox

The wrapper of the combobox widget. It wraps the search input box, the dropdown list arrow and the selected value's input box, which is hidden.

.k-combobox .k-dropdown-wrap

Wraps only the search input box and the dropdown list arrow.

.k-combobox .k-dropdown-wrap .k-input

The search input text box element of the widget.

.k-combobox .k-dropdown-wrap .k-select

The dropdown list arrow container.

.k-combobox .k-dropdown-wrap .k-i-arrow-s

The actual dropdown list arrow symbol.

Additional states of the control

These CSS classes are added to the .k-dropdown-wrap in different scenarios (when the widget is focused, hovered, disabled, etc.).

Class/selector name

Description

.k-combobox .k-dropdown-wrap.k-state-hover

This class is added to the widget when the mouse hovers over the RadComboBox.

.k-combobox .k-dropdown-wrap.k-state-focused

This class is added to the widget when the RadComboBox is focused.

.k-combobox .k-dropdown-wrap.k-state-disabled

This class is added to the widget when the widget is disabled. That is when the enabled property is set to false.

.k-combobox .k-dropdown-wrap.k-state-border-down

This class is added to the widget when the popup is opened below the input text box.

.k-combobox .k-dropdown-wrap.k-state-border-up

This class is added to the widget when the popup is opened above the input text box.

.k-combobox .k-dropdown-wrap.k-state-active

This class is added to the widget when the popup is opened, no matter if above or below the input text box.

List Container Output

Below you can see the basic HTML output of the dropdown list container of the RadComboBox and descriptions of its elements.

HTML Copy imageCopy
<div class="k-animation-container">
    <div class="k-list-container k-popup k-group k-reset">
        <ul class="k-list k-reset">
            <li class="k-item">Suggestion 1</li>
            <li class="k-item">Suggestion 2</li>
        </ul>
    </div>
</div>

Class/selector name

Description

.k-animation-container

The element that wraps the list popup when it is animated.

.k-list-container.k-popup

The wrapper element of the popup.

Note

Two additional CSS classes are added to the .k-popup.

  • .k-state-border-down - This class is added to the widget when the popup is opened below the input box.

  • .k-state-border-up - This class is added to the widget when the popup is opened above the input box.

.k-popup .k-list

The list container with the results.

.k-popup .k-list .k-item

A single item from the results.

Additional States of the items

These CSS classes are added to the .k-item element in different scenarios (when it is focused, hovered or selected).

Class/selector name

Description

.k-popup .k-state-hover.k-item

This class is added to the list item when the mouse hovers over it.

.k-popup .k-state-focused.k-item

This class is added to the list item when it is focused.

.k-popup .k-state-selected.k-item

This class is added to the list item when it is selected from the dropdown.