Оформление checkbox и radio

[radrigo 209]

Всем привет.

В DLE не все checkbox оформлены одинаково.

В большинстве случаев input и label находится рядом

<input type="checkbox" name="exactname" value="yes" id="exactname">
<label for="exactname">Точное имя</label>

Но встречается, когда input расположен внутри label

<label for="all_word_seach">
    <input type="checkbox" name="all_word_seach" value="1" id="all_word_seach">
    Точное совпадение всех слов
</label>

Пример обеих кнопок выше приведён из расширенного поиска.

Неоднократно пытался красиво их оформить, но без плагина это сделать не получалось. На днях решил опять попробовать и начал искать информацию. В большинстве случаев практически одно и тоже с использованием ::before и ::after через label, так как на input практически никакие стили не действуют.

На одном забугорном сайте увидел пример оформление checkbox с использованием стиля appearance, при помощи которого можно сбросить внешний вид элемента и заменить своими стилями. После применения этого стиля к input начинают работать background, border, width, height и другие, что уже даёт возможность сделать более красивое оформление checkbox и radio.

Ниже пример такого оформления, кому интересно. Как это выглядит, можно посмотреть у меня на сайте в расширенном поиске https://gusev-online.ru/index.php?do=search

input[type="radio"],
input[type="checkbox"] {
  vertical-align: middle;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: -5px 8px 0 0;
  background-color: #fff;
  outline: 2px solid #007eb4;
  border: 2px solid #fff;
  width: 14px;
  height: 14px;
  cursor: pointer;
  outline-offset: 0;
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background-color: #007eb4;
}
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  -webkit-box-shadow: 0 0 0 4px #008ed6;
          box-shadow: 0 0 0 4px #008ed6;
}
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  cursor: not-allowed;
  background-color: #e0e0e0;
  border: 2px solid #e0e0e0;
  opacity: 0.4;
}
input[type="radio"]:disabled:checked,
input[type="checkbox"]:disabled:checked {
  background-color: #007eb4;
}
input[type="radio"] {
  border-radius: 7px;
}

Всё удачи!

[Dock174 2]

Было полезно, спасибо за информацию.