web-dev-qa-db-fra.com

CSS: stylisé une case à cocher pour ressembler à un bouton, y a-t-il un survol?

J'ai créé un petit bouton à regarder au lieu d'une case à cocher. Je me demandais s'il y avait un moyen d'avoir un look: hover d'une manière ou d'une autre? Merci

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

csshovercss-selectors
35
trying_hal9000
#ck-button:hover {
    background:red;
}

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

35
Kelly Cook

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

http://jsfiddle.net/VWBN4/

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

et pour un survol et un état cliqué:

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

la commande est cependant importante.

25
Joseph Marikle

Faites ce que Kelly a dit ...

MAIS. Au lieu d'avoir input positionné en absolu et en haut -20px (en le cachant simplement sur la page), masquez la zone de saisie.

exemple:

<input type="checkbox" hidden>

Fonctionne mieux et peut le mettre n'importe où sur la page.

14
user3328769

Faites ceci pour un effet border et font sympa:

#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/

4
Jason Gennaro