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

Ответ 1

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

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

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

Ответ 2

Что-то, что я недавно обнаружил для стилизации кнопок радио и флажков. Раньше мне приходилось использовать 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;.

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

Ответ 3

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

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

Поскольку IE6 не понимает селекторов атрибутов, вы можете объединить script только в IE6 (с условными комментариями) и jQuery или IE7.js Дин Эдвардс.

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

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

Ответ 7

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

<input type="checkbox">
<input type="radio">

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

В IE10 в Windows 8 отображается следующее:

Ответ 8

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

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

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

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

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

main.css

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

ie.css

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

Затем используйте специальный CSS-код IE:

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

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