Edit this page

Change the appearance of the input element

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

The tutorial will show you different ways of changing the appearance of the input element of RadComboBox (inline, in the code-behind, with JavaScript, with CSS).

  • Inline

Set the BackColor and ForeColor properties of 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 RenderMode="Lightweight" 

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

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article