RadComboBox for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX
Caution

This tutorial is relevant to the old versions of Telerik.Web.UI assembly (prior to Q1 2009). For the new versions please check this tutorial.

The tutorial will show you different ways of changing the appearance of the input element of RadComboBox.

  • Inline

    Set the BackColor and ForeColor properties of RadComboBox:

    CopyASPX
    <telerik:radcombobox 
    id="RadComboBox1" 
    backcolor="red" 
    forecolor="yellow" 
    width="180"
    runat="server">
</telerik:radcombobox>

    The result is:

    ComboBox Input Styled

  • Code-behind You can set different properties in the code behind as follows:

    CopyC#
    protected void Page_Load(object sender, EventArgs e)
{    
    RadComboBox1.BackColor = System.Drawing.Color.Red;    
    RadComboBox1.ForeColor = System.Drawing.Color.Yellow;    
    RadComboBox1.Font.Bold = true;
}

    The result is:

    ComboBox Input Styled

  • JavaScript You can change the look of the input area with JavaScript code, e.g. dynamically in the OnClientSelectedIndexChanged

    CopyJavaScript
    function OnClientSelectedIndexChangedHandler(sender, eventArgs) {
    var inputElement = sender.get_inputDomElement();
    inputElement.style.backgroundColor = "blue";
    inputElement.style.color = "yellow";
    inputElement.style.height = "37px";
    inputElement.style.textAlign = "center";
}

    The result is:

    ComboBox Input Styled - Height Increased

  • CSS

    • Add the CSS rules to the <Head> section of the page:

      CopyCSS
      <style type="text/css">
    div.RadComboBox_MyDefault .rcbInputCell INPUT.rcbInput
    {
        background-color: red;
        color: yellow;
        height: 37px;
    }
</style>

      Here MyDefault is the name of the Skin of RadComboBox. If you use a different skin, you need to put its name instead of Default.

      The result is:

      ComboBox Input Styled - Height Increased

    • Using the CssClass property:

      CopyASPX
      <telerik:RadComboBox 
    ID="RadComboBox4" 
    Width="180" 
    CssClass="CustomCssClass" 
    runat="server">
</telerik:RadComboBox>

      In order the CSS class to take effect to the input area (override the default skin), you need to define it in the following way

      CopyCSS
      div.CustomCssClass .rcbInputCell INPUT.rcbInput
{    
    background-color: red;       
    color: yellow;    
    height: 37px;    
}

      Here the specificity of the selector is high enough to override the skin's selector.

See Also