Metrotouch radios and checkboxes on Chrome

2 posts, 0 answers
  1. Fit2Page
    Fit2Page avatar
    443 posts
    Member since:
    Feb 2007

    Posted 14 Aug 2014 Link to this post

    Upon using a Radformdecorator custom Metrotouch skin, we noticed radio’s and checkboxes don’t show  on chrome browser.
    Using Chrome
    36.0.1985.143 m
    Downloaded latest

    We have found some ‘errors’ in css
    Missing ‘!important’ declarations     

    After this radio’s and checkboxes work again.
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"] {
        background-repeat: no-repeat;
        background-position: 0 3px!important;
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"]:hover {
        background-position: -40px 3px!important;
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"]:checked {
        background-position: 0 -37px!important;
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"]:hover:checked {
        background-position: -40px -37px!important;
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"][disabled], .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"][disabled]:hover {
        background-position: 0 -117px!important;
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"][disabled]:checked, .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"][disabled]:checked:hover {
        background-position: 0 -157px!important;
    .RadForm_MetroTouchNeutral.rfdRadio input[type="radio"] {
        background-repeat: no-repeat;
        background-position: -80px 3px!important;
    .RadForm_MetroTouchNeutral.rfdRadio input[type="radio"]:hover {
        background-position: -120px 3px!important;
    .RadForm_MetroTouchNeutral.rfdRadio input[type="radio"]:checked {
        background-position: -80px -37px!important;
    .RadForm_MetroTouchNeutral.rfdRadio input[type="radio"]:hover:checked {
        background-position: -120px -37px!important;
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="radio"][disabled], .RadForm_MetroTouchNeutral.rfdCheckbox input[type="radio"][disabled]:hover {
        background-position: -80px -117px!important;
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="radio"][disabled]:checked, .RadForm_MetroTouchNeutral.rfdCheckbox input[type="radio"][disabled]:checked:hover {
        background-position: -80px -157px!important;

  2. Misho
    Misho avatar
    198 posts

    Posted 19 Aug 2014 Link to this post


    I've tried to replicate the unwanted behavior that you are experiencing with decorated radios and checkboxes on my side but no avail. Here is a video showing my test:
    and the markup I've tested with:
    <asp:ScriptManager runat="server"></asp:ScriptManager>
           <telerik:RadSkinManager runat="server" ShowChooser="true"></telerik:RadSkinManager><br />
           <telerik:RadFormDecorator runat="server" DecoratedControls="All" />
           <input id="Button1" type="radio" name="name1" value="Test1" /><label for="Button1"> Test1</label><br />
           <input id="Button2" type="radio" name="name1" value="Test2" /><label for="Button2"> Test2</label><br />
           <input id="Button3" type="checkbox" name="name2" value="test3"/><label for="Button3"> Test3</label><br />
           <input id="Button4" type="checkbox" name="name2" value="test4"/><label for="Button4"> Test4</label><br />

    The issue might be related to the custom CSS you've applied to the skin.
    You may find the following article useful for creating your own custom skin:
    Please don't hesitate to contact us if you have questions.

    I hope you will find this information helpful.

    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Back to Top