CSS: tạo kiểu hộp kiểm để trông giống như một nút, có di chuột không?

Question

Tôi đã tạo một nút nhỏ để hiển thị thay vì hộp kiểm. Tôi đã tự hỏi nếu có một cách để cũng có một: hover nhìn bằng cách nào đó? nhờ

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

Answer 1

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

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

Answer 2

có vẻ như bạn cần một quy tắc rất giống với quy tắc kiểm tra của bạn

http://jsfiddle.net/VWBN4/3

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

và di chuột và nhấp tiểu bang:

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

thứ tự là quan trọng.

Answer 3

Làm điều này cho một mát border và font hiệu lực:

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

Ví dụ:http://jsfiddle.net/zAFND/6/

Answer 4

Hãy làm những gì Kelly nói ...

NHƯNG. Thay vì đặt input được đặt ở vị trí tuyệt đối và trên cùng -20px (chỉ cần ẩn nó khỏi trang), hãy đặt hộp nhập liệu bị ẩn.

dụ:

<input type="checkbox" hidden> 

trình tốt hơn và có thể đặt nó ở bất cứ đâu trên trang.