Our site uses a tablet-optimized layout with larger fonts and higher-contrast UI elements, so the default MetroTouch styling wasn’t enough. Telerik applies opacity to disabled RadDropDownList controls, which makes them appear faded rather than intentionally styled. The key to fixing this is overriding the .rddlDisabled state and explicitly resetting the opacity so your background and text colors render correctly.
Below is the CSS we use to standardize the RadDropDownList across our UI. It increases readability, aligns with our MetroTouch base theme, and ensures that enabled and disabled states remain visually distinct and consistent.
.RadDropDownList_MetroTouch {
font-size: 21px !important;
font-family: Arial !important;
font-weight: 100 !important;
min-height: 26px !important;
}
.RadDropDownList_MetroTouch .rddlFocused {
}
.RadDropDownList_MetroTouch .rddlFakeInput {
min-height: 26px !important;
}
.rddlInner {
padding-left:5px !important;
line-height: 30px !important;
padding-bottom: 0 !important;
margin-bottom:0 !important;
}
This code will style the DDL enabled/disabled colors. The key was the 'opacity'
/* Darker background for the disabled state */
.RadDropDownList_MetroTouch .rddlInner.rddlDisabled {
background-color: #f0f0f0 !important;
color: #ffffff !important; /* Optional: lighter text for contrast */
opacity:1;
border: 1px solid #cccccc
}
/* Lighter background for the enabled state */
.RadDropDownList_MetroTouch .rddlInner {
background-color: white !important;
opacity: 1;
border: 1px solid #cccccc
}