css 样式复选框看起来像一个按钮，有一个悬停？

wpx232ag 于 2023-01-18 发布在其他

关注(0)|答案(4)|浏览(95)

我创建了一个小按钮来代替复选框显示。我想知道是否有一种方法也有：悬停外观不知何故？
超文本：

<div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div>

CSS：

div label input {
   margin-right:100px;
}
body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

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

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

css

来源：https://stackoverflow.com/questions/7642277/css-styled-a-checkbox-to-look-like-a-button-is-there-a-hover

4条答案

按热度按时间

iklwldmw1#

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

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

赞(0）回复(0）举报 2023-01-18

pbgvytdp2#

看起来您需要一个与选中规则非常相似的规则
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;
}

但是顺序很重要。

赞(0）回复(0）举报 2023-01-18

w9apscun3#

照凯利说的做...
与其将input绝对定位在顶部-20px（只是将其隐藏在页面之外），不如隐藏输入框。
示例：

<input type="checkbox" hidden>

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

赞(0）回复(0）举报 2023-01-18

egdjgwm84#

执行此操作可获得很酷的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/

赞(0）回复(0）举报 2023-01-18

我来回答

css 样式复选框看起来像一个按钮，有一个悬停？

4条答案

相关问题

热门标签

最新问答