CSS：使复选框看起来像一个按钮，是否有悬停？

Question

我创建了一个小型的按钮来显示而不是复选框。我想知道是否有办法也有一个：悬停看起来不知何故？感谢

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

Answer 1

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

小提琴：http://jsfiddle.net/zAFND/4/

Answer 2

它看起来像你需要非常相似，你的检查规则

http://jsfiddle.net/VWBN4/3

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

和悬停和点击的规则状态：

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

但是顺序很重要。

Answer 3

这样做对阴凉border和font效果：

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

例子：http://jsfiddle.net/zAFND/6/

Answer 4

做什么凯利说...

BUT。而不是让input绝对定位，顶部-20px（只是隐藏它离开页面），使输入框隐藏。

例如：

<input type="checkbox" hidden> 

效果更好，可以把它放在页面上的任何地方。