New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
CSS Classes
CSS Classes Description
The table below shows the classes used by the embedded Telerik RadFormDecorator skin (the non-embedded skins css classes signature conforms to the same concepts):
Skin Specific CSS
CSS Class | Description |
---|---|
.RadForm_SkinName.rfdZone | CSS class for styling the decoration zone or the html tag of the page |
.RadForm_SkinName.rfdScrollBars | Decorates the scrollbars |
.RadForm_SkinName.rfdButton a.rfdSkinnedButton, .RadForm_SkinName.rfdButton input[type="button"].rfdDecorated, .RadForm_SkinName.rfdButton input[type="reset"].rfdDecorated, .RadForm_SkinName.rfdButton input[type="submit"].rfdDecorated, .RadForm_SkinName.rfdButton .rfdSkinnedButton button | Decorates Input elements of the followyng type: input type="button / submit / reset" and button type="button / submit / reset" - look if there is a secondary .rfdButton class applied to the root element |
.RadForm_SkinName.rfdHeading h4, .RadForm_SkinName.rfdHeading h5, .RadForm_SkinName.rfdHeading h6 | Decorates Headings Elements - h4 (Heading 4), h5 (Heading 5), h6 (Heading 6) |
.RadForm_SkinName.rfdLabel label | Decorates Labels: label Tag |
.RadForm_SkinName .rfdCheckboxUnchecked, .RadForm_SkinName .rfdInputDisabled.rfdCheckboxUnchecked:hover | Decorates Input elements of Checkbox type for normal and hover states: input type="checkbox" |
.RadForm_SkinName .rfdRadioUnchecked, .RadForm_SkinName .rfdInputDisabled.rfdRadioUnchecked:hover | Decorate Input elements of Radio type for normal and hover states: input type="radio" |
.rfdRoundedInner, .rfdRoundedOuter, table.rfdRoundedWrapper, table.rfdRoundedWrapper_fieldset, table.rfdRoundedWrapper td, table.rfdRoundedWrapper_fieldset>tbody>tr>td, table.rfdRoundedWrapper td, table.rfdRoundedWrapper_fieldset td, .RadForm_SkinName.rfdFieldset table.rfdRoundedWrapper_fieldset legend, .RadForm_SkinName fieldset.rfdFieldset legend, .RadForm_SkinName table.rfdRoundedWrapper:hover div.rfdRoundedInner | Decorates Fieldset and Legend Elements general layout styles. Decorate normal and hover states: fieldset and legend tags |
.RadForm_SkinName table.rfdRoundedWrapper:hover .rfdRoundedOuter | This selector decorates the hover of the side bars of the rounded elements |
.RadForm_SkinName.rfdTextbox input[type="text"], .RadForm_SkinName.rfdTextbox input[type="password"], .RadForm_SkinName.rfdTextarea textarea, .RadForm_SkinName.rfdTextarea textarea[disabled]:hover, .RadForm_SkinName.rfdTextbox input[disabled][type="text"]:hover, .RadForm_SkinName.rfdTextbox input[disabled][type="password"]:hover, .RadForm_SkinName.rfdTextbox .rfdDecorated:hover, .RadForm_SkinName.rfdTextbox .rfdDecorated:hover, .RadForm_SkinName.rfdTextarea textarea:hover | Decorates normal and hover states of the following input element: input type="text / password" and textarea.For all browsers except IE6 we are using attribute selectors - single or double. |
.RadForm_SkinName.rfdFieldset table.rfdRoundedWrapper_fieldset legend, .RadForm_SkinName.rfdFieldset fieldset.rfdFieldset legend, .RadForm_SkinName.rfdFieldset table.rfdRoundedWrapper_fieldset fieldset, .RadForm_SkinName.rfdFieldset fieldset.rfdFieldset Nb: having a background image on a fieldset is not okay with IE | Decorates Fieldset and Legend Elements styles. |
.RadForm_SkinName table.rfdRoundedWrapper input, .RadForm_SkinName table.rfdRoundedWrapper textarea, .RadForm_SkinName input.rfdInput, .RadForm_SkinName textarea.rfdTextarea,{ border: solid 1px #yourColor;background: #yourColor;color: #yourColor;}.RadForm_SkinName textarea.rfdTextarea, .RadForm_SkinName table.rfdRoundedWrapper textarea{overflow: auto;} | Decorates the same as the above:Because of a glitch in IE the following 2 CSS classes must be declared separately for correct parsing of the textarea class in IE6 |
.rfdSelect_SkinName, .rfdSelect_SkinName:hover, .rfdSelect_SkinName .rfdSelectOuter, .rfdSelect_SkinName:hover .rfdSelectOuter, .rfdSelect_SkinName .rfdSelectArrow span, .rfdSelectBox_SkinName .rfdSelect_selected, .rfdSelectBox_SkinName li:hover, .rfdSelect_SkinName.rfdSelectDisabled:hover, .rfdRtl .rfdSelect_SkinName, .rfdRtl .rfdSelect_SkinName:hover, .rfdRtl .rfdSelect_SkinName .rfdSelectOuter, .rfdRtl .rfdSelect_SkinName .rfdSelectOuter:hover{}.rfdSelect_SkinName .rfdSelectOuter, .rfdSelect_SkinName.rfdSelectDisabled:hover .rfdSelectOuter{ } | Decorate Select element states. |
.rfdSelectBox_SkinName{}.rfdSelectBox_SkinName li{}.rfdSelectBox_SkinName .rfdSelect_selected, .rfdSelectBox_SkinName li:hover{}.rfdSelectBox_SkinName.rfdSelectBox_optgroup_label:hover{ } | Decorate dropdown settings which replace the HTML Select element during the RadFormDecorator skinning. |
* html .rfdSkinnedButton.rfdInputDisabled{ }* html .RadForm_SkinName.rfdButtona.rfdInputDisabled:hover{ }* html .RadForm_SkinName.rfdButton a.rfdInputDisabled:hover*{ }.RadForm_SkinName.rfdTextbox input.rfdIE6TextBox, .RadForm_SkinName.rfdTextbox textarea.rfdIE6TextBox{ } | IE6 disabled state fix - this should not be added to the base stylesheet, but at the bottom of the skin file |
@media screen and (-webkit-min-device-pixel-ratio: 0){ /* all between brackets marked in red will be renders onlyfrom Safari and Chrome // checkboxes /.rfdCheckbox input[type="checkbox"], .rfdCheckboxinput[type="checkbox"][disabled]:hover{background-image: url(''); }/ radio buttons */.rfdRadio input[type="radio"], .rfdRadio input[type="radio"][disabled="disabled"]:hover{ background-image: url(''); } } | The styling of radiobuttons and checkboxes in Safari and Chrome is already fully achieved with CSS. |
Skin-specific Scrollbar Settings for WebKit Browsers (Safari, Chrome,Midori, Shiira, Epiphany)
CSS Class | Description |
---|---|
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-thumb:vertical, .RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-thumb:horizontal, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-thumb:vertical, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-thumb:horizontal | Decorates scrollbar face color. |
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-track-piece, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-track-piece | Decorates scrollbar track background color. |
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:vertical:decrement, .RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:vertical:increment, .RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:horizontal:decrement, .RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:horizontal:increment, .RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-thumb:vertical, .RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-thumb:horizontal, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:vertical:decrement, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:vertical:increment, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:horizontal:decrement, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:horizontal:increment, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-thumb:vertical, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-thumb:horizontal | Decorates scrollbar track border color. |
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:vertical:decrement, .RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:vertical:increment, .RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:horizontal:decrement, .RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:horizontal:increment, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:vertical:decrement, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:vertical:increment, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:horizontal:decrement, .RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:horizontal:increment | Decorates increment / decrement button settings. |
GridView, FormView, DetailsView
CSS Class | Description |
---|---|
.RadForm_SkinName.rfdGrids .rfdTable | Decorates Grid Table: table tag |
.RadForm_SkinName.rfdGrids .rfdTable th | Decorates Grid Table heading cell: th tag |
.RadForm_SkinName.rfdGrids .rfdTable td | Decorates Grid Table data cell: td tag |
.RadForm_SkinName.rfdGrids .rfdTable a | Decorates Grid Table anchor: a tag |
Common CSS
CSS Class | Description |
---|---|
.rfdRealInput | Input position |
.rfdButton a.rfdSkinnedButton | Decorates the skinned button |
.rfdButton a.rfdSkinnedButton:focus | Decorates the focused button |
.rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover | Decorates the hovered button |
.RadForm.rfdTextbox .rfdSkinnedButton input, .RadForm.rfdTextbox .rfdSkinnedButton button, .RadForm.rfdTextbox .RadComboBox input, .RadForm.rfdTextbox .RadComboBox input[type="text"] | Decorates Buttons |
.RadForm.rfdTextbox input[type="button"].rfdDecorated, .RadForm.rfdTextbox input[type="reset"].rfdDecorated, .RadForm.rfdTextbox input[type="submit"].rfdDecorated | Decorates decorated Buttons |
.rfdCheckboxChecked, .rfdCheckboxUnchecked, .rfdRadioUnchecked, .rfdRadioChecked | Decorates radio buttons and check boxes |
.rfdSkinnedButton.rfdInputDisabled, .rfdTextarea textarea[disabled], .rfdTextbox input[type="text"][disabled], .rfdTextbox input[type="password"][disabled] | Decorates disabled FormDeocrator elements |
.rfdSelectBox, .rfdSelectBox.rfdSelectDisabled:hover, .rfdSelectBox ul, .rfdSelectBox li, .rfdSelectBox li .rfdSelectBox_optgroup li, .rfdSelectBox_optgroup, .rfdSelectBox_optgroup_label, .rfdSelectBox.rfdSelectDisabled li:hover, .rfdSelectBox .rfdSelectBox_optgroup li, .rfdSelectBox li.rfdSelectBox_optgroup_label | Dropdown settings select box |
.rfdValidationSummaryControl, .rfdLoginControl | Validation Summary control and Login control decorated by RadFormDecorator |
.rfdValidationSummaryControl ul | Styles unordered list nested in Validation summary field |
.RadForm_SkinName .rfdValidationSummaryControl, .RadForm_SkinName.rfdLoginControl | Validation Summary control and Login control skin specific |
.RadForm_SkinName a.rfdLoginControl, .RadForm_SkinName a.rfdLoginControl:active, .RadForm_SkinName a.rfdLoginControl:visited, .RadForm_SkinName a.rfdLoginControl:hover | Login control skin specific anchor styles |