Stile pulsanti radio

Question

Desidero creare pulsanti di opzione con puro CSS, senza classi o ID. Basta inserire [tipo = radio]. Voglio usare un'immagine di sfondo per deselezionata e selezionata. Tuttavia, -vendor-appearance: none; non funziona con Trident o Gecko. Solo Webkit. In questi browser è possibile vedere l'immagine di sfondo come sfondo del pulsante di opzione, ma il pulsante è ancora lì invece di visualizzare semplicemente l'immagine, come posso eliminare il pulsante in modo che venga visualizzata solo l'immagine di sfondo. Il violino: http://jsfiddle.net/7kScn/

Answer 1

È possibile utilizzare un trucco selettore CSS2 per connettersi a un gruppo radio e visualizzare subito dopo altre cose.

See: http://jsfiddle.net/7kScn/1/

E 'solo un esempio di base, ma opera sulla premessa di nascondere il campo di inserimento e poi lo styling l'etichetta subito dopo di esso, dandogli l'effetto che è la cosa reale che si sta controllando .

Answer 2

È utile? input [type = radio]: checked { border: 1px solid black; }

Answer 3

Ho scritto un tutorial su come personalizzare le caselle di controllo e le radio con i CSS solo, così come creare accensioni/spegnimenti tramite styling l'etichetta e usando il suo :before e :after pseudoclasses. Forse questo aiuta :) Leggi qui: http://blog.felixhagspiel.de/index.php/posts/custom-inputs