CSS: stylizowane pole wyboru, aby wyglądać jak przycisk, czy jest kursor?

Stworzyłem mały przycisk do wyświetlania zamiast pola wyboru. Zastanawiałem się, czy jest sposób, aby również mieć :hover wyglądać jakoś? dzięki

Http://jsfiddle.net/zAFND/2/

Author: trying_hal9000, 2011-10-04
Source

4 answers

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

Http://jsfiddle.net/zAFND/4/

 32
Author: Kelly Cook,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-04 01:00:58

Wygląda na to, że potrzebujesz reguły bardzo podobnej do Twojej sprawdzonej

Http://jsfiddle.net/VWBN4/3 

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

I dla stanu hover I clicked: 

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

Kolejność jest jednak ważna.

 24
Author: Joseph Marikle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-04 01:03:25

Rób, co mówi Kelly...

Ale. Zamiast umieszczać input absolute i top -20px (po prostu ukrywając go na stronie), Ukryj pole wprowadzania.

Przykład: 

<input type="checkbox" hidden>

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

 12
Author: user3328769,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-29 09:03:34

Zrób to dla fajnego 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/

 3
Author: Jason Gennaro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-04 01:13:43