Styling Text with Disabled Options

[Neal Chamen]

Is it possible now, or will it be possible in the future, to use FormDecorator to style the label text that accompanies e.g. a radio button or a check box when that item is disabled?

I have looked through the css and can't see where it might be done, so assume that it is automatically done by the browser, as normally with disabled radio buttons and checkboxes in HTML.

I would really like to disable my checkboxes and radiobuttons so they can't be clicked but have the text display normally, in black or any other colour, without being greyed out.

Any help appreciated.

[Martin]

Hi Neal,

At present the disabled state of the labels is carried out by the browser - in IE the label text becomes "embossed" and semi-transparent / grayed-out in Firefox and Opera.

Currently, there is no CSS workaround for this in Internet Explorer, because no CSS can be applied to items that have the disabled="disabled" property.

However, in Firefox and Mozilla you are allowed to manipulate disabled items with css. Here's how this could be done with the Default skin of RadFormDecorator:

label.Default.radfdInputDisabled.radfdRadioUnchecked,
label.Default.radfdInputDisabled.radfdRadioChecked,
label.Default.radfdInputDisabled.radfdCheckboxChecked,
label.Default.radfdInputDisabled.radfdCheckboxUnchecked

{
    color: red !important;
}

Do not add space between classes, as this is a composite class (i.e. the three classes are applied to the same element) and do not forget the !important flag, otherwise you will not be able to override the default settings. If you are using a different skin, just change Default with the name of the skin you are using. You may also play with the transparency values - opacity and -moz-opacity. Any property value you are using for this fix should be followed by the !important flag.

Best wishes,
Martin Ivanov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center