How To Change Disabled Appearance

[Robert]

Hello,

 

Does anyone know how to change the appearance of the disabled radio and check boxes?  I’ve located one style “rfdInputDisabled” that reduces the opacity of the label and the radio/checkbox when using a radio/checkbox list but the resulting appearance is unattractive and looks “ratty” around the edges.

 

I do notice that when I turn off the style “rfdInputDisabled” the text is gray which is what I want but I cannot figure out how that gray color is being applied and I cannot locate any other style that is controlling the color.  The radio and checkbox images would need to be edited to include a grayed out version but I'm not sure where I could place those background images.

 

Thank you,

Bob

[Martin]

Hi Robert,

The disabled state of the labels of RadFormDecorator, as well as any other HTML elements is achieved with the disabled="disabled" HTML attribute, which reflects the system settings for disabled elements. If you look at a disabled menu item in Internet Explorer or in FF, you will notice that the behavior is exactly the same - in IE/Windows these items are "engraved" and in Gecko/WebKit/Presto browsers these items are semi-transparent. Unfortunately, this behavior cannot be controlled with CSS and we cannot help much here.

Have a great weekend,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Robert]

Hi Martin,

I was able to remove the engraved effect that IE places on the text by doing the following in the FormDecorator.css file:

.rfdInputDisabled
{
 /* filter: alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;  */
color: #999 !important;
}

I commented out the opacity settings and colored the text gray.  The text color is affected by this change in Firefox only, IE renders it a medium gray by default but does not accept the color change.  For example, if I change the color to "red" Firefox will show the disabled text as red but IE ignores it.

I found a solution as well for the checkboxes and radio buttons.  Commenting out the opacity setting (shown above) forces the images (set as backgrounds) to appear as they do when the disabled setting is not set to disabled, in their active state.  To account for that I separated the styles that govern the disabled states and created an additional image sprite to replicate the disabled state.  The styles are as follows (note this is a custom skin named "new"):

/* added to use a separate disabled check box background image */
.RadForm_new.rfdInputDisabled.rfdCheckboxUnchecked,
.RadForm_new.rfdInputDisabled.rfdCheckboxUnchecked:hover
{
background: transparent url('FormDecorator/CheckBoxSpritesDisabled.gif') no-repeat 0 0;
}

/* added to use a separate disabled check box background image */
.RadForm_new.rfdInputDisabled.rfdCheckboxChecked,
.RadForm_new.rfdInputDisabled.rfdCheckboxChecked:hover
{
 background: transparent url('FormDecorator/CheckBoxSpritesDisabled.gif') no-repeat 0 -420px;
}

/* added to use a separate disabled radio button background image */
.RadForm_new.rfdInputDisabled.rfdRadioUnchecked,
.RadForm_new.rfdInputDisabled.rfdRadioUnchecked:hover
{
background: transparent url('FormDecorator/RadioButtonSpritesDisabled.png') no-repeat 1px 0;
}

/* added to use a separate disabled radio button background image */
.RadForm_new.rfdInputDisabled.rfdRadioChecked,
.RadForm_new.rfdInputDisabled.rfdRadioChecked:hover
{
background: transparent url('FormDecorator/RadioButtonSpritesDisabled.png') no-repeat 1px -440px;
}

Lastly I edited the following to account for the PNG transparency problem in IE6:

.RadForm_new.rfdRadioUnchecked,
.RadForm_new.rfdRadioUnchecked:hover,
.RadForm_new.rfdRadioChecked,
.RadForm_new.rfdRadioChecked:hover
{
_background-image: url('FormDecorator/RadioButtonSprites.gif');
}

.RadForm_new.rfdInputDisabled.rfdRadioUnchecked,
.RadForm_new.rfdInputDisabled.rfdRadioChecked,
.RadForm_new.rfdInputDisabled.rfdRadioUnchecked:hover,
.RadForm_new.rfdInputDisabled.rfdRadioChecked:hover,
{
 _background-image: url('FormDecorator/RadioButtonSpritesDisabled.gif');
}

So far this is working though I've only tested it on IE and FF so it may need some additional attention in Opera and Safari, etc.


Bob