CSS-стиль ввода

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

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

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

Это должно быть довольно широко поддержано в настоящее время. Смотрите поддержку для браузеров

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

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

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

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

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

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

Надеюсь, что это несколько полезно для вас.

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

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

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

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

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

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

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

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

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

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

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

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

Поскольку IE6 не понимает селекторы атрибутов, вы можете комбинировать сценарий, видимый только в 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 и т. д.)

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

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

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

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

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

main.css

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

ie.css

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

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

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

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