Stile di input della casella di controllo CSS

Qualsiasi stile per inputinfluisce su ogni elemento di input. C'è un modo per specificare lo stile da applicare solo per le caselle di controllo senza applicare una classe a ciascun elemento della casella di controllo?

Con CSS 2 puoi fare questo:

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

Questo dovrebbe essere abbastanza ampiamente supportato ormai. Vedi supporto per i browser

Creo la mia soluzione senza etichetta

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

Qualcosa che ho scoperto di recente per lo styling dei pulsanti radio e delle caselle di controllo. Prima, dovevo usare jQuery e altre cose. Ma questo è stupidamente semplice.

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

Si può fare lo stesso per una casella di controllo, ovviamente cambiare il input[type=radio]per input[type=checkbox]e il cambiamento border-radius:15px;a border-radius:4px;.

Spero che questo ti sia in qualche modo utile.

Anche le lezioni funzionano bene, come ad esempio:

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

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

È possibile applicare solo a determinati attributi facendo:

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

Lo spiega qui .

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

Ma questo funzionerà solo per i browser tranne IE7 e inferiori, per quelli che dovrai usare una classe.

Trident fornisce lo ::-ms-checkpseudo-elemento per i controlli di casella di controllo e pulsante di opzione. Per esempio:

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

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

Viene visualizzato come segue in IE10 su Windows 8:

Poiché IE6 non comprende i selettori di attributi, è possibile combinare uno script visto solo da IE6 (con commenti condizionali) e jQuery o IE7.js di Dean Edwards.

IE7 (.js) è una libreria JavaScript per far sì che Microsoft Internet Explorer si comporti come un browser conforme agli standard. Risolve molti problemi HTML e CSS e fa funzionare correttamente PNG trasparente in IE5 e IE6.

La scelta di utilizzare classi o jQuery o IE7.js dipende dai tuoi gusti e antipatie e dalle tue altre esigenze (forse la trasparenza PNG-24 in tutto il tuo sito senza dover fare affidamento su PNG-8 con trasparenza completa che ricade sulla trasparenza a 1 bit su IE6 - creato solo da Fireworks e pngnq, ecc.)

Sebbene i CSS forniscano un modo per eseguire lo stile specifico del tipo di casella di controllo o di un altro tipo, ci saranno problemi con i browser che non lo supportano.

Penso che la tua unica opzione in questo caso sarà applicare le classi alle tue caselle di controllo.

aggiungi la class = "checkbox" alle tue caselle di controllo.

Quindi crea quello stile nel tuo codice CSS.

Una cosa che potresti fare è questa:

main.css

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

ie.css

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

Quindi utilizzare i CSS specifici di IE includere:

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

Sarà comunque necessario aggiungere la classe affinché funzioni in IE e non funzionerà in altri browser non IE che non supportano IE. Ma renderà il tuo sito web all'avanguardia con il codice css e man mano che IE riceverà supporto, sarai in grado di rimuovere il codice css specifico e anche le classi css dalle caselle di controllo.