2

У меня есть проект, где иногда checkbox'ы не имеют соответствующих label'ов. Единственный способ установки произвольного изображения для checkbox, который я нашёл, была установка изображения для label:before для соответствующего label, который имеет значение for с атрибутом id checkbox'a.

Если какой-либо способ CSS (по крайней мере, с хаками) установки произвольного изображения для checkbox'a без изменения разметки? input[type="checkbox"]:before работает только в Chrome.

1

1 ответ 1

2

Единственный способ, который я нашёл, который работает везде кроме IE для Desktop (работает в IE для Windows Phone) через CSS-свойство appearance:

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}
<input type="checkbox" />

4
  • А добавлять label display: none - не выход? 30 июн 2017 в 9:25
  • Я не хочу менять разметку. И зачем мне label там, где он сам по себе не нужен? 30 июн 2017 в 9:26
  • А что в вашем ответе должно позеленеть? Я в своем FF53 вижу обычный checkbox и ни чего зеленого :Р
    – Visman
    30 июн 2017 в 9:36
  • @Visman В FF54 (Windows 10 Pro x64) у меня работает. 30 июн 2017 в 9:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.