CSS : styliser une case à cocher pour qu'elle ressemble à un bouton, y a-t-il un survol ?

Question

J'ai créé un petit bouton à afficher au lieu d'une case à cocher. Je me demandais s'il y avait un moyen d'avoir également un look :hover ? Merci.

http://jsfiddle.net/zAFND/2/

Answer 1

#ck-button:hover {
    background:red;
}

Violon : http://jsfiddle.net/zAFND/4/

Answer 2

Il semble que vous ayez besoin d'une règle très similaire à votre règle vérifiée

http://jsfiddle.net/VWBN4/3

#ck-button input:hover + span {
    background-color:#191;
    color:#fff;
}

et pour les états de survol et de clic :

#ck-button input:checked:hover + span {
    background-color:#c11;
    color:#fff;
}

L'ordre est cependant important.

Answer 3

Faites ce que Kelly a dit...

MAIS. Au lieu d'avoir le input positionné en absolu et en haut -20px (en le cachant simplement hors de la page), faites en sorte que le champ de saisie soit caché.

exemple :

<input type="checkbox" hidden> 

Cela fonctionne mieux et on peut le mettre n'importe où sur la page.

Answer 4

Fais ça pour un cool border y font effet :

#ck-button:hover {             /*ADD :hover */
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid red;      /*change border color*/ 
    overflow:auto;
    float:left;
    color:red;                 /*add font color*/
}

Exemple : http://jsfiddle.net/zAFND/6/