IE CheckBox problem

[Uros]

Hi,
I have problems with IE showing CheckBox. It's working prefect in Chrome. In IE it's not showing checkbox at all.

Here's the code:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .RadForm_CRM {
  

 /* checkboxes */
  }

  .RadForm_CRM.rfdCheckbox input[type="checkbox"], .RadForm_CRM.rfdCheckbox input[type="checkbox"][disabled]:hover, .RadForm_CRM.rfdRadio input[type="radio"], .RadForm_CRM.rfdRadio input[type="radio"][disabled="disabled"]:hover {
    /*height: 30px;
    line-height: 30px !important;
    padding-left: 22px !important;*/
    /*background-image: url('../Common/MetroTouch/CheckBoxRadioSprites.png');
    background-repeat: no-repeat;*/
 background-position:0 0 !important; 
  }
  .RadForm_CRM.rfdCheckbox label, .RadForm_CRM.rfdRadio label {
    vertical-align: middle;
  }
  .RadForm_CRM.rfdCheckbox input[type="checkbox"], .RadForm_CRM.rfdCheckbox input[type="checkbox"][disabled]:hover {
     background-image: url('../Common/MetroTouch/CheckBox.png') !important;
 background-position:0 0 !important;
 background-repeat: no-repeat !important;
 height:24px !important;
 width:24px !important;
  }
  .RadForm_CRM.rfdCheckbox input[type="checkbox"]:hover {
    background-image: url('../Common/MetroTouch/CheckBoxHover.png') !important;
 background-position:0 0 !important;
 background-repeat: no-repeat !important;
 height:24px !important;
 width:24px !important;
  }
  .RadForm_CRM.rfdCheckbox input[type="checkbox"]:checked, .RadForm_CRM.rfdCheckbox input[type="checkbox"][disabled]:hover:checked {
    background-image: url('../Common/MetroTouch/CheckBoxChecked.png') !important;
 background-position:0 0 !important;
 background-repeat: no-repeat !important;
 height:24px !important;
 width:24px !important;
  }
  .RadForm_CRM.rfdCheckbox input[type="checkbox"]:hover:checked {
    background-image: url('../Common/MetroTouch/CheckBoxCheckedHover.png') !important;
 background-position:0 0 !important;
 background-repeat: no-repeat !important;
 height:24px !important;
 width:24px !important;
  }

Any ideas?

THX.

Uros

[Bozhidar]

Hello,

It seems you are using a custom Skin. The provided code snippet applies styles for webkit browsers only (Chrome). The styles inserted into:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
      /* styles applied in Chrome only */
}

will be visible in Chrome, Safari and other webkit browsers only.

IE, FireFox and Opera have another styles in the CSS code, that you should also edit. The difference is caused by the fact that webkit browsers allow to style inputs of type checkbox and radio with CSS (you could use background image to change the check and/or radio), while other browsers does not allow this, and have different approach to style them - we hide the real input and render a label with a background image that is decorated as a checkbox or radio button.

So in order to apply the same styles in all other browsers, you have to find the specific styles and to apply what you want.

Regards,
Bozhidar
Telerik

[Uros]

Thank you for your help :)

Regards, Uros