You can change the look and feel of the ComboBox using the ComboBox CssClass property.
The ComboBox has a predefined set of CSS classes that can be overridden. It has
a default style which is embedded as a WebResource and is a part of the Toolkit
assembly that has styles set for all the sub-classes. You can find the default styles
in the Toolkit solution in the
"AjaxControlToolkit\ComboBox\ComboBox.css"
file. If your CssClass does not provide values for any of those then it falls back
to the default value. In the example above the default style is displayed when "[Empty
String]" is selected as the CssClass. To customize the same the user would
have to set the CssClass property to the name of the CSS style and define the styles
for the individual classes so that the various elements in a ComboBox control can
be styled accordingly. For example, if the CssClass property was set to "CustomComboBoxStyle",
this is how the css to style the border and background color would look:
.CustomComboBoxStyle .ajax__combobox_textboxcontainer input {
background-color: #ADD8E6;
border: solid 1px Blue;
border-right: 0px none;
}
.CustomComboBoxStyle .ajax__combobox_buttoncontainer button {
background-color: #ADD8E6;
border: solid 1px Blue;
}
ComboBox Css classes
- .ajax__combobox_inputcontainer: A table element that contains and
positions the ComboBox's button and text box input elements. Child Css classes:
ajax__combobox_textboxcontainer, ajax__combobox_buttoncontainer.
- .ajax__combobox_textboxcontainer: The table cell that contains
the ComboBox's text box input element.
- .ajax__combobox_buttoncontainer: The table cell that contains the
ComboBox's button element.
- .ajax__combobox_itemlist: The ul element that contains the ComboBox's
list item (li) elements.