CSS: zaznaczono pole wyboru, aby wyglądało jak przycisk, czy jest najechanie myszą?

Question

Utworzono mały przycisk do wyświetlenia zamiast pola wyboru. Zastanawiam się, czy istnieje sposób, aby również mieć jakoś wyglądać: hover? Dzięki

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

Answer 1

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

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

Answer 2

wygląda trzeba reguły bardzo podobny do swojej sprawdzonej reguły

http://jsfiddle.net/VWBN4/3

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

i dla zawisu i kliknięciu stan:

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

kolejność jest ważna.

Answer 3

Zrób to dla chłodnym border i font efektu:

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

Przykład:http://jsfiddle.net/zAFND/6/

Answer 4

Czy co Kelly powiedział ...

ALE. Zamiast umieszczania input w pozycji absolutnej i górnej -20px (po prostu ukrywając ją przed stroną), upewnij się, że pole wejściowe jest ukryte.

przykład:

<input type="checkbox" hidden> 

działa lepiej i można umieścić go w dowolnym miejscu na stronie.