Как удалить лишние пробелы в верхней части поля ввода с помощью пользовательской тени блока (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/

Answer 2

Хорошо, я нашел решение, которое работает. Если у кого-то есть альтернативное или лучшее решение, пожалуйста, опубликуйте его.

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>