CSS Classes | RadFormDecorator for ASP.NET AJAX Documentation
Edit this page

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
Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy