The RadTextBox renders its editable area inside an element with the class .rtbInput, and Telerik themes often apply color, opacity, and font rules that override your site’s defaults. If you want consistent styling, especially for NullText or disabled states, you need to target Telerik’s internal classes directly.
A basic global override looks like this:
input {
color: black !important;
font-weight:normal !important;
}
This works, but it’s broad. A more precise approach is to target the RadTextBox structure itself:
/* Style the disabled textbox itself */
.RadInput .riTextBox.riDisabled {
background-color: #f0f0f0 !important;
color: #666 !important;
border-color: #ccc !important;
cursor: not-allowed;
}
If you’re styling NullText, Telerik uses .rtbEmpty, and for disabled controls it adds .rtbDisabled. Overriding those gives you full control:
/*Styles the text box */
html body .RadInput_MetroTouch .riTextBox {
border-color: #e0dfdf;
color: blue !important;
background-color: #fff;
font: 100 16px "Segoe UI",Arial,Helvetica,sans-serif
}
/* Style the disabled textbox itself */
.RadInput .riTextBox.riDisabled {
background-color: #f0f0f0 !important;
color: red !important;
border-color: #ccc !important;
cursor: not-allowed;
}