Change the appearance of the input element

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:


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

The result is:

ComboBox Input1

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

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 Input2

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

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 Input3

  • CSS

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


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

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 Input4

Using the CssClass property:


<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


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

How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin

CSS Skin File Selectors

Understanding the Skin CSS File

Change the height of the input element