CODEWITHSUNDEEP
htmlcssmacos
rami dulman
rami dulman

Reputation: 41

css checkbox scale does not scale well on os x

I want to create a visually bigger checkboxes. I've read here that the only way to that is using the CSS transform scale:

input[type="checkbox"]{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
}

The problem is that on windows, browsers IE, FF and Chrome it looks perfect but on OS X Yosemite it looks 3 or even 4 times bigger than the original size (checked Chrome and Safari).

anyone knows how to solve this?

full example: http://jsfiddle.net/dulmanr/g3h3z1pf/1/

Upvotes: 0

Views: 181

Answers (1)

BraMKJ
BraMKJ

Reputation: 193

Trying to alter native form elements is always a bit risky. Very often it causes strange behavior in the form elements, in this case it's OSX doing strange stuff.

When ever I need to make checkboxes and radiobuttons look different from the native elements I replace them altogether. Check http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/ for more info on how to do this. Saved me in a couple of occasions. Browser support is decent too. IE9 and upwards supported.

Upvotes: 1

Related Questions