Enlarging Checkboxes and Radiobuttons

2 posts, 0 answers
  1. David Balderree
    David Balderree avatar
    10 posts
    Member since:
    Apr 2007

    Posted 21 May 2010 Link to this post

    Hi,
    I've made a custom skin with enlarged graphics for the checkboxsprites and radiobuttonsprites using the visual style builder.  The new skin works fine on IE, Firefox, and Opera but not Webkit browsers, which still show the regular smaller graphics.  Is there any way to get this working on all browsers in such a way that it won't break in the future?
    Thanks,
    David
  2. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 25 May 2010 Link to this post

    Hello David,

    The styling of radiobuttons and checkboxes in Safari and Chrome is already fully achieved with CSS. That`s why for both browsers we use CSS styling with background images applied to checkbox and radiobutton elements. In other browsers like Firefox, Opera and Internet Explorer we hide the real input element and than we apply the background image. The CSS code bellow is taken from the RadFormDecorator Black Skin and it exists in all Skin Specific stylesheets. I believe it exists in your custom skin also. You should find and set the proper file names and paths to the background images that you like to use for decorating checkboxes and radiobuttons:

    /* the styling of radiobuttons and checkboxes in Safari and Chrome is already fully achieved with CSS */
    @media screen and (-webkit-min-device-pixel-ratio: 0)
    {
        /* checkboxes */
        .rfdCheckbox input[type="checkbox"],
        .rfdCheckbox input[type="checkbox"][disabled]:hover
        {
            background-image: url('<%=WebResource("Telerik.Web.UI.Skins.Black.FormDecorator.CheckBoxSprites.gif")%>');
        }
         
        /* radio buttons */
        .rfdRadio input[type="radio"],
        .rfdRadio input[type="radio"][disabled="disabled"]:hover
        {
            background-image: url('<%=WebResource("Telerik.Web.UI.Skins.Black.FormDecorator.RadioButtonSprites.png")%>');
        }
    }

    More about that CSS code above, which is readable for Safari and Chrome only, you could find at: CSS Hack for Google Chrome and Safari

    Kind regards,
    Bojo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top