Стиль ввода флажков CSS

Любой стиль input влияет на каждый элемент ввода. Есть ли способ указать стиль для применения только для флажков без применения classа к каждому элементу флажка?

С помощью CSS 2 вы можете сделать это:

 input[type='checkbox'] { ... } 

К настоящему времени это должно быть довольно широко. Чтобы увидеть поддержку браузеров, перейдите по ссылке: https://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons–webdesign- 8953

Что-то, что я недавно обнаружил для стилизации кнопок радио и флажков. Раньше мне приходилось использовать jQuery и другие вещи. Но это глупо просто.

 input[type=radio] { padding-left:5px; padding-right:5px; border-radius:15px; -webkit-appearance:button; border: double 2px #00F; background-color:#0b0095; color:#FFF; white-space: nowrap; overflow:hidden; width:15px; height:15px; } input[type=radio]:checked { background-color:#000; border-left-color:#06F; border-right-color:#06F; } input[type=radio]:hover { box-shadow:0px 0px 10px #1300ff; } 

Вы можете сделать то же самое для флажка, очевидно, изменить input[type=radio] для input[type=checkbox] и изменить border-radius:15px; к border-radius:4px; ,

Надеюсь, это вам немного полезно.

Классы также хорошо работают, например:

  
 input[type="checkbox"] { /* your style */ } 

Но это будет работать только для браузеров, кроме IE7 и ниже, для тех, кому придется использовать class.

Вы можете применить только к определенному атрибуту, выполнив:

 input[type="checkbox"] {...} 

Это объясняет это здесь .

Поскольку IE6 не понимает селекторов атрибутов, вы можете комбинировать скрипт, который просматривается только IE6 (с условными комментариями) и jQuery или IE7.js от Dean Edwards.

IE7 (.js) – это библиотека JavaScript, позволяющая Microsoft Internet Explorer вести себя как браузер, совместимый со стандартами. Он исправляет многие проблемы HTML и CSS и делает прозрачную работу PNG корректной в IE5 и IE6.

Выбор использования classов или jQuery или IE7.js зависит от ваших симпатий и антипатий и других ваших потребностей (может быть, прозрачность PNG-24 на вашем сайте, не полагаясь на PNG-8 с полной прозрачностью, которая отступает от 1-битной прозрачности на IE6 – создаются только Fireworks и pngnq и т. д.)

Trident предоставляет псевдоэлемент ::-ms-check для элементов управления ::-ms-check и переключателем. Например:

   ::-ms-check { color: red; background: black; padding: 1em; } 

Это отображается в IE10 в Windows 8 следующим образом:

введите описание изображения здесь

Я создаю собственное решение без ярлыка

 input[type=checkbox] { position: relative; cursor: pointer; } input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 16px; height: 16px; top: 0; left: 0; border: 2px solid #555555; border-radius: 3px; background-color: white; } input[type=checkbox]:checked:after { content: ""; display: block; width: 5px; height: 10px; border: solid black; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 2px; left: 6px; } 
     

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

Я думаю, что ваш единственный вариант в этом случае – применить classы к вашим ячейкам.

просто добавьте флажок class = “checkbox” в свои флажки.

Затем создайте этот стиль в коде css.

Одна вещь, которую вы можете сделать, это:

main.css

 input[type="checkbox"] { /* css code here */ } 

ie.css

 .checkbox{ /* css code here for ie */ } 

Затем используйте IE css css include:

  

Вам все равно нужно добавить class для работы в IE, и он не будет работать в других браузерах, не поддерживающих IE, которые не поддерживают IE. Но он заставит ваш сайт продвигаться вперед с помощью кода css и по мере того, как IE получит поддержку, вы сможете удалить конкретный код css, а также classы css из флажков.

  • Свойства CSS: отображение и видимость
  • Почему «переполнение: авто» очищает всплывающие windows? И почему нужны чистые поплавки?
  • Как выбрать всех дочерних элементов элемента, кроме последнего дочернего элемента?
  • Форматирование чисел (десятичные разряды, разделители тысяч и т. Д.) С помощью CSS
  • Показать / скрыть div на клик с помощью CSS
  • Центр Треугольника в нижней части Div
  • Мой CSS не вводится через мой скрипт контента
  • CSS «набросает» поведение разных поведений на Webkit & Gecko
  • как реплицировать pinterest.com's абсолютное расположение стека div
  • Можно ли центрировать текст в поле выбора?
  • Возможна ли вогнутая граница границы?
  • Давайте будем гением компьютера.