Stile di input della casella di controllo CSS

Qualsiasi stile per l’ input influisce su ogni elemento di input. Esiste un modo per specificare lo stile da applicare solo alle caselle di controllo senza applicare una class a ciascun elemento della casella di spunta?

Con CSS 2 puoi fare questo:

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

Questo dovrebbe essere abbastanza ampiamente supportato ormai .. Per vedere il supporto per i browser, vai qui: https://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons–webdesign- 8953

Qualcosa che ho scoperto di recente per lo styling di pulsanti e 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; } 

Puoi fare lo stesso per un checkbox, ovviamente cambia l’ input[type=radio] per input[type=checkbox] e cambia border-radius:15px; a border-radius:4px; .

Spero che questo ti sia un po ‘utile.

Anche le lezioni funzionano bene, come ad esempio:

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

Ma questo funzionerà solo per i browser eccetto IE7 e sotto, per quelli dovrai usare una class.

Puoi applicare solo a determinati attributi eseguendo:

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

Lo spiega qui .

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

IE7 (.js) è una libreria JavaScript che consente a Microsoft Internet Explorer di comportarsi come un browser conforms agli standard. Corregge molti problemi HTML e CSS e rende PNG trasparente funzionare correttamente sotto IE5 e IE6.

La scelta di utilizzare classi o jQuery o IE7.js dipende dai tuoi Mi piace e Non mi piace e dai tuoi altri bisogni (forse la trasparenza PNG-24 in tutto il tuo sito senza dover fare affidamento su PNG-8 con completa trasparenza che fallbacks alla trasparenza a 1 bit su IE6 – creato solo da Fireworks e pngnq, ecc.)

Trident fornisce lo pseudo-elemento ::-ms-check per i controlli casella di controllo e pulsante radio. Per esempio:

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

Questo viene visualizzato come segue in IE10 su Windows 8:

inserisci la descrizione dell'immagine qui

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

Sebbene i CSS forniscano un modo per fare lo stile specifico per il tipo di checkbox o un altro tipo, ci saranno problemi con i browser che non supportano questo.

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

aggiungi semplicemente 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 includono:

  

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