Перейти к публикации

Рекомендованные сообщения

Всем привет.

В 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;
}

Всё удачи!

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...