Исправление выравнивания перекрестных меток флажков

#css

Вопрос:

Мне нужно отобразить перекрестную метку внутри снятого флажка. Я написал код, подобный этому:

HTML:

 <input type="checkbox" class="cls-1"/>

CSS:

 .cls-1:not(:checked):after {
    content: '0D7';
    margin: 0px 0px 0px 2px;
}

Однако выравнивание перекрестной метки неверно. Между верхним пунктом флажка и верхним пунктом перекрестных меток появляется пробел. Есть ли способ сделать так, чтобы перекрестная метка отображалась точно по центру.

Stackblitz для примера кода можно найти здесь: https://stackblitz.com/edit/js-ul1sgb

1. не могли бы вы просто отступить сверху на 1 пиксель? (или на желаемую величину)

2. Использование псевдоэлементов для входных элементов работает только в некоторых браузерах и теоретически вообще не должно работать … этого вам следует избегать.

3. @04FS Даже если это правда, это не нарушит интерактивность для этих браузеров. Это просто немного дополнительный стиль.

Ответ №1:

попробуйте это

 h1, h2 {
  font-family: Lato;
}

.cls-1:not(:checked):after {
  content: '0D7';
  margin: 0px 0px 0px 2px;
  position: absolute;
  top:-2px;
}
.cls-1 {
  position:relative
}

 <div id="app1">
  <input type="checkbox" class="cls-1"/>
</div>

Ответ №2:

можете ли вы попробовать добавить свойство высоты строки к флажку типа ввода, скажем, 10 пикселей; например:

 input {
  line-height: 10px;
}

Ответ №3:

Просто добавьте display: flex; align-items: center; в .cls-1 . Спасибо

 .cls-1 {
    display: flex;
    align-items: center;
}

Ответ №4:

Я изменил ваш css, чтобы расположить крест по центру. Для достижения этого используйте высоту строки 0,5 rem.

 h1, h2 {
  font-family: Lato;
}

.cls-1:not(:checked):after {
  content: '0D7';
  margin: 0px 0px 0px 2px;
  display: inline-block;
  vertical-align: text-top;
  line-height: 0.5rem;
}

 <div id="app1">
  <input type="checkbox" class="cls-1"/>
</div>