Understanding What Telerik Renders in Edit Mode
When a RadGrid row switches into edit mode, Telerik doesn’t give you a simple <input> sitting in a <td>. Instead, it wraps each editor in a small stack of generated markup:
The row becomes <tr class="rgEditRow">
Each editable cell becomes <td class="rgEditCell">
The editor inside may be:
A plain <input type="text"> (for simple GridBoundColumn)
A RadInput control, which renders as <input class="riTextBox riEnabled">
A nested structure if you’re using masked or numeric inputs
This extra markup is why your normal CSS selectors don’t always “stick.” Telerik’s skins apply their own font sizes, padding, and colors — and they do it with fairly high specificity. To override them, you need selectors that target the edit-mode structure directly.
Targeting Edit-Mode Textboxes with CSS
The simplest and most reliable way to style every textbox in edit mode is to target the two containers Telerik uses: .rgEditRow and .rgEditForm. Once you anchor your selector there, you can safely override Telerik’s defaults without affecting the rest of your grid.
Here’s the exact CSS:
/* Applies to all textboxes inside an edit row */
.RadGrid .rgEditRow input[type="text"],
.RadGrid .rgEditForm input[type="text"] {
font-size: 16px !important;
padding: 4px 6px;
color:#333333;
}