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
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
0
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:
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.
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.