Styl CSS pola wyboru

Każdy styl dla inputwpływa na każdy element wejściowy. Czy istnieje sposób określenia stylu, który ma być stosowany tylko do pól wyboru bez stosowania klasy do każdego elementu pola wyboru?

Dzięki CSS 2 możesz to zrobić:

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

Powinno to być do tej pory dość szeroko obsługiwane. Zobacz wsparcie dla przeglądarek

Tworzę własne rozwiązanie bez etykiety

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">

Coś, co niedawno odkryłem do stylizacji przycisków radiowych i pól wyboru. Wcześniej musiałem używać jQuery i innych rzeczy. Ale to jest głupio proste.

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

Można zrobić to samo dla wyboru, oczywiście zmienić input[type=radio]na input[type=checkbox]i zmiany border-radius:15px;do border-radius:4px;.

Mam nadzieję, że jest to dla Ciebie przydatne.

Dobrze sprawdzają się też zajęcia, takie jak:

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

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

Możesz zastosować tylko do określonego atrybutu, wykonując:

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

Wyjaśnia to tutaj .

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

Ale zadziała to tylko w przeglądarkach z wyjątkiem IE7 i starszych, w przypadku tych będziesz musiał użyć klasy.

Trident dostarcza ::-ms-checkpseudoelement do kontrolek pól wyboru i przycisków opcji. Na przykład:

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

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

W przeglądarce IE10 w systemie Windows 8 wyświetla się to następująco:

Ponieważ IE6 nie obsługuje selektorów atrybutów, można łączyć skrypt widziany tylko przez IE6 (z komentarzami warunkowymi) i jQuery lub IE7.js autorstwa Deana Edwardsa.

IE7 (.js) to biblioteka JavaScript, dzięki której program Microsoft Internet Explorer zachowuje się jak przeglądarka zgodna ze standardami. Rozwiązuje wiele problemów z HTML i CSS i sprawia, że ​​przezroczysty PNG działa poprawnie pod IE5 i IE6.

Wybór użycia klas lub jQuery lub IE7.js zależy od twoich upodobań i niechęci oraz innych potrzeb (może przezroczystość PNG-24 w całej witrynie bez konieczności polegania na PNG-8 z pełną przezroczystością, która ustępuje 1-bitowej przezroczystości w IE6 - utworzone tylko przez Fireworks i pngnq itp.)

Chociaż CSS zapewnia sposób na wykonanie stylu charakterystycznego dla typu pola wyboru lub innego typu, będą problemy z przeglądarkami, które tego nie obsługują.

Myślę, że jedyną opcją w tym przypadku będzie zastosowanie klas do pól wyboru.

po prostu dodaj class = "checkbox" do swoich pól wyboru.

Następnie utwórz ten styl w swoim kodzie css.

Możesz zrobić jedną rzecz:

main.css

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

ie.css

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

Następnie użyj specyficznego dla IE css:

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

Nadal będziesz musiał dodać klasę, aby działała w IE, i nie będzie działać w innych przeglądarkach innych niż IE, które nie obsługują IE. Ale sprawi, że Twoja witryna będzie myśleć przyszłościowo z kodem css, a gdy IE otrzyma wsparcie, będziesz mógł usunąć np. Określony kod css, a także klasy css z pól wyboru.