MA KHAN MA KHAN - 4 years ago 278
HTML Question

Weird Chrome checkbox behaviour CSS Styling

I've recently solved browser neutral check boxes issue which I was having in IE vs Chrome. we have a theme for the application in the background. Theme color get applies if I checked the check box in chrome but not in IE11.

How should I force or tell the chrome check box to ignore the theme. it's working fine in IE but not in chrome that's the problem.

http://jsfiddle.net/khan777/LnL7b/109/

.mycheckbox:checked {
background: url(icon.png)no-repeat center center;
background-size: 100%;
}


Here's how ugly it's Chrome.

Answer Source

If what you're referring to is "ugly" is the transparent background color once the box is checked, add the background color to your property in front of the URL:

.MyCheckBox:checked {
    display : inline-block;
    background: #fff url(http://vignette3.wikia.nocookie.net/roblox/images/5/57/Very-Basic-Checkmark-icon.png/revision/latest?cb=20131125154354) no-repeat center center;
    background-size: 100%;
}

If you meant something else, please add details.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download