[Solved] Metrotouch radios and checkboxes on Chrome

[Fit2Page]

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
Telerik_UI_for_ASP.NET_AJAX_2014_2_724_Dev_hotfix.zip

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;
}
}

Marc

[Misho]

Hello,

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:
http://screencast.com/t/8tdJm8zIDp
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:
http://www.telerik.com/help/aspnet-ajax/introduction-create-custom-skin.html
http://www.telerik.com/help/aspnet-ajax/formdecorator-creating-custom-skins.html
Please don't hesitate to contact us if you have questions.

I hope you will find this information helpful.

Regards,
Misho
Telerik