KPC
Kevin Powell - Community•2y ago
sarah

Is there a good way to resize checkbox and radio button inputs for Safari?

I need to double the size of the checkboxes and radio button inputs for this design system project I'm working on. I'm unable to find a solution that works across all browsers (Safari is giving me grief). My markup's pretty straight-forward: 
<input type="checkbox" id="foo" />
<label for="foo">Checkbox example</label>
<br>
<input type="radio" id="bar" />
<label for="bar">Radio example</label>
<input type="checkbox" id="foo" />
<label for="foo">Checkbox example</label>
<br>
<input type="radio" id="bar" />
<label for="bar">Radio example</label>
I've attempted the following CSS solutions: 
/* Works in Chrome and Firefox */
/* Safari shows an increase in size of bounding box, but input itself doesn't change size */ 
input[type="checkbox"],
input[type="radio"] {
  height: 2em;
  width: 2em;
}

/* Works in Chrome and Firefox */
/* Safari: Input increases to correct size, but it's really blurry */
input[type="checkbox"],
input[type="radio"] {
  transform: scale(2,2); /* I also tried the `scale: 2;` property */
}
/* Works in Chrome and Firefox */
/* Safari shows an increase in size of bounding box, but input itself doesn't change size */ 
input[type="checkbox"],
input[type="radio"] {
  height: 2em;
  width: 2em;
}

/* Works in Chrome and Firefox */
/* Safari: Input increases to correct size, but it's really blurry */
input[type="checkbox"],
input[type="radio"] {
  transform: scale(2,2); /* I also tried the `scale: 2;` property */
}
I'd hate to have to create a custom checkbox/radio button just to increase its size. It seems like their should be a simple way to resize this element in Safari and I'm hoping I'm just missing something.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?