Caselle di controllo stile come pulsanti di commutazione

Question

Sul mio sito Web, gli utenti possono pubblicare articoli e taggarli di conseguenza utilizzando alcuni tag preimpostati. Questi tag sono sotto forma di checkbox. Esempio di seguito:

<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Aliens" /> Aliens 
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Ghosts" /> Ghosts 
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Monsters" /> Monsters 

Come sapete, le caselle di controllo sarà simile a questo:

[] Aliens

[o] Ghosts

[] mostri

Mi piacerebbe avere la casella di controllo è un pulsante grande con il valore al suo interno. E poi fallo avere un effetto "alternatore".

[Aliens] [Ghosts] [ Monsters]

come dovrei andare a fare questo?

Answer 1

check out this

HTML

<input id="chk_aliens" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Aliens" /> 
<label for="chk_aliens">Aliens</label> 

<input id="chk_ghosts" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Ghosts" /> 
<label for="chk_ghosts">Ghosts</label> 

<input id="chk_monsters" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Monsters" /> 
<label for="chk_monsters">Monsters</label> 

CSS

.vis-hidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

label { 
    margin: 10px; 
    padding: 5px; 
    border: 1px solid gray; 
} 

input:focus + label { 
    border-color: blue; 
} 

input:checked + label { 
    border-color: red; 
} 

input:focus:checked + label { 
    border-color: green; 
} 

Nota che l'ultimo di selezione potrebbe non funzionare in più vecchio IE.

Answer 2

, radio pulsanti e SELECT elementi hanno funzionalità di stile molto limitate e variano ampiamente tra i vari browser.

È meglio realizzare questi collegamenti utilizzando pulsanti o pulsanti con stile, quindi utilizzare JavaScript per impostare l'aspetto on/off effettivo ei valori del modulo.

Answer 3

Si può provare ad avere immagini con evento javascript onclick che cambierebbe l'attributo img source. Quindi, metti il ​​controllo nascosto con il dato id e nello stesso evento onclick usa document.getElementById('hiddencontrol').value = 1 - document.getElementById('hiddencontrol').value (con 0 o 1 come predefinito).

Tuttavia, non so come farlo senza Javascript.

Answer 4

Puoi prendere in prestito idee da questo page! Prova a collegare il testo e la casella di controllo. E poi prova a usare jquery per "attivare" l'etichetta associata alla casella di controllo.

È quindi possibile utilizzare stili e immagini per rendere le etichette simili ai contenitori per le caselle di controllo. Questo è quello che farei.

Answer 5

Questa operazione può essere eseguita utilizzando le caselle di controllo e le etichette, il selettore fratello adiacente e la pseudo classe CSS3 :selected.

HTML:

<span><input type="checkbox" id="c1"><label for="c1">[ Aliens ]</label></span> 
<span><input type="checkbox" id="c2"><label for="c2">[ Ghosts ]</label></span> 
<span><input type="checkbox" id="c3"><label for="c3">[ Monsters ]</label></span> 

CSS:

input { display:none; } 
input:checked ~ label { color:red; } 

http://jsfiddle.net/drTg2/

ma essere consapevoli che questo sarà facilmente fallire nei browser meno recenti - perché non sanno ~ o :checked. E i vecchi IE hanno problemi con le caselle di controllo impostate su display:none - non le trasferiscono quando il modulo viene inviato (anche se può essere superato con altri mezzi di occultamento, ad esempio il posizionamento assoluto dello schermo).

Se non insisti su una soluzione HTML/CSS pura - ci sono molti script/{js-framework-of-your-choice} -plugins, che aiutano a ottenere lo stesso effetto.