This is a migrated thread and some comments may be shown as answers.

Enlarging Checkboxes and Radiobuttons

1 Answer 39 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Recursor
Top achievements
Rank 1
Recursor asked on 21 May 2010, 10:05 PM
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

1 Answer, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 25 May 2010, 03:11 PM
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.
Tags
FormDecorator
Asked by
Recursor
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Share this question
or