html - 如何使用自定义框阴影 (Chrome 68) 删除输入复选框顶部的多余空格？

Question

请参阅下面的图片和 jsfiddle。这似乎与字体大小的增加有关。是否有另一种方法可以增加复选框的大小，同时在 Chrome (68) 上保持自定义的周围框阴影？我已经尝试了一些东西。

参见: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"/>

Answer 1

这与您增加复选框大小的方式有关。而不是使用 font-size使用 -webkit-transform: scale(<insert your scale>);这应该有效。你可以在这里看一个例子:https://jsfiddle.net/19L30kvr/