How To Change Disabled Appearance

3 posts, 0 answers
  1. Robert
    Robert avatar
    58 posts
    Member since:
    Dec 2008

    Posted 29 Apr 2009 Link to this post

    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

  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 01 May 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert avatar
    58 posts
    Member since:
    Dec 2008

    Posted 01 May 2009 Link to this post

    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










     
Back to Top