How do you remove extra whitespace on the top of an input checkbox with custom box-shadow (Chrome 68)?

Question

See image and jsfiddle below. It seems to have to do with the increase in font-size. Is there an alternative way to increase the size of the checkbox while maintaining a custom surrounding box-shadow on Chrome (68)? I've tried a few things.

See: https://jsfiddle.net/tnpa6r80/

input[type='checkbox'] {
  font-size: 20px;  
}

input[type='checkbox']:focus {
    border-color: red;
    box-shadow: 0 0 6px red;
    outline: none;
}

<input type="checkbox"/>

and why increasing the font-size of a checkbox? it has no effect — Temani Afif, Aug 16 '18 at 15:46
@TemaniAfif It does make it bigger. See https://jsfiddle.net/tnpa6r80/ vs https://jsfiddle.net/tnpa6r80/8/ vs https://jsfiddle.net/tnpa6r80/7/ — Niles Turner, Aug 16 '18 at 15:49
no they are all the same for me which is logical and I am also using chrome .. can you share a screenshot of the difference? — Temani Afif, Aug 16 '18 at 15:50
I am on a mac and the font size makes no difference and it is the cause of the extra space — Huangism, Aug 16 '18 at 15:53
I'm on a mac - 10.13.2 using chrome 68.0.3440.106 https://jsfiddle.net/tnpa6r80/12/ — Niles Turner, Aug 16 '18 at 15:55
Chrome 69 on Windows the font-size does nothing but I do see the whitespace. — Paulie_D, Aug 16 '18 at 15:57

score 2 · Answer 1 · answered Aug 16 '18 at 17:54

2

It has to do with the way in which you are increasing the size of the checkbox. Instead of using font-size use -webkit-transform: scale(<insert your scale>); and that should work. You can look an example here: https://jsfiddle.net/19L30kvr/

answered Aug 16 '18 at 17:54

Crro

75
1
9

score 1 · Answer 2 · answered Aug 16 '18 at 18:42

Ok I figured out a solution that works. If anyone has an alternative or better solution please post it.

https://jsfiddle.net/19L30kvr/22/

#input-container {
      display: inline-block;
      width: 24px;
      height: 24px;   
}

#input-container:focus-within  {
  box-shadow: 0px 0px 6px red;
}

input[type='checkbox'] {
  zoom: 2;
  margin: 0;
}

<div id='input-container'>
  <input id='input' type="checkbox"/>
</div>

How do you remove extra whitespace on the top of an input checkbox with custom box-shadow (Chrome 68)?

2 Answers2