Telerik ASP.NET ComboBox Styling

Introduction

Styling the Telerik ASP.NET RadComboBox can be frustrating because the control ships with deeply layered skins, sprite images, and browser-specific rules that override your CSS. If you’ve ever tried to set a simple background color only to have Telerik’s theme snap it back, you’re not alone. This article gives you a set of targeted CSS overrides that reliably control the ComboBox’s enabled and disabled states without breaking the rest of the skin. The goal is simple: predictable styling, clean overrides, and no more fighting with hidden gradients or opacity rules.

Related Articles

... and you 'll find more on the Telerik ASPNET Menu

Body

The RadComboBox applies multiple nested elements and classes, so the key to consistent styling is overriding the correct selectors with !important only where Telerik forces your hand. The first block targets the default enabled state, removing built-in gradients and restoring a clean white background. The second block handles the disabled state, which Telerik renders with dimmed text and a recessed look. By overriding the .rcbDisabled selectors, you can restore full opacity, remove text shadows, and apply your own neutral gray background. These snippets work across skins because they target the structural classes Telerik uses internally, giving you predictable results regardless of theme.

 

/* --- 1. DEFAULT / ENABLED STATE (White Background) --- */
/* Target the input container and the actual input text box */
div.RadComboBox .rcbInputCell,
div.RadComboBox .rcbInputCell INPUT.rcbInput {
    background-color: white !important;
    background-image: none !important; /* Clears any built-in gradient sprites */
    opacity: 1 !important;
}
 
/* --- 2. DISABLED STATE (Gray Background) --- */
/* When Telerik disables the control, it adds the .rcbDisabled class to the wrapper */
div.RadComboBox_disabled .rcbInputCell,
div.RadComboBox .rcbDisabled .rcbInputCell,
div.RadComboBox .rcbDisabled .rcbInputCell INPUT.rcbInput {
    background-color: #f0f0f0 !important;
    background-image: none !important;
    color: black !important;
 
    /* Override browser-specific disabled text dimming */
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
    /* Remove any text-shadows Telerik skins might use to create a "recessed" look */
    text-shadow: none !important;
}

 

 

RealWorldCode gives developers practical, real‑world solutions with clean, working code — no fluff, no theory, just answers.
Links
Home
Knowledge Areas
Sitemap
Contact
Et cetera
Privacy Policy
Terms and Conditions
Cookie Preferences