Стилі введення 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 - створено лише феєрверками та pngnq тощо)

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

Я думаю, що вашим єдиним варіантом у цьому випадку буде застосування класів до ваших прапорців.

просто додайте в свої прапорці class = "checkbox".

Потім створіть цей стиль у своєму коді css.

Ви можете зробити це:

main.css

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

тобто.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 з прапорців.