Telerik UI for Windows 8 HTML

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

Basic Output

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

HTML Copy imageCopy
<span class="t-list win-interactive">
    <span class="k-widget k-dropdown k-header">
        <span class="k-dropdown-wrap k-state-default">
            <span class="k-input">Default optionLabel</span>
            <span class="k-select">
                <span class="k-icon k-i-arrow-s">select</span>
            </span>
        </span>
    </span>
</span>

Class/selector name

Description

.t-list

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

.k-dropdown

The wrapper of the drop down widget and the hidden selected value's input box.

Note

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

  • .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-dropdown .k-dropdown-wrap

The wrapper of the drop down widget.

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

The text element of the widget.

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

The drop down arrow container.

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

The actual drop down 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-dropdown .k-dropdown-wrap.k-state-hover

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

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

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

.k-dropdown .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-dropdown .k-dropdown-wrap.k-state-border-down

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

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

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

.k-dropdown .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 RadDropDownList 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.km-popup

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.