CSS：将复选框设置为看起来像按钮，是不是有悬停？

Posted 2023-03-06

【中文标题】CSS：将复选框设置为看起来像按钮，是不是有悬停？

【英文标题】：CSS: styled a checkbox to look like a button, is there a hover?CSS：将复选框设置为看起来像按钮，是否有悬停？

【发布时间】：2011-11-30 08:00:21

【问题描述】：

我创建了一个看起来很小的按钮来显示而不是复选框。我想知道是否有办法以某种方式也有一个 :hover 外观？谢谢

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

【问题讨论】：

#ck-button:hover background: blue 例如

【参考方案1】：

#ck-button:hover 
    background:red;

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

【参考方案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;

顺序很重要。

【参考方案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/

【讨论】：

嗯...这很整洁，但发帖人并没有具体询问。此外，css cmets 始终为 /*...*/。

谢谢@Joseph。是的。我知道 OP 并没有要求它......我正在回答 :hover Q 并给我一点额外的价值。至于 cmets，是的，我意识到 css cmets 是不同的。它仅用于示例。但无论如何都为了现实而改变了;-)

我明白了。实际上想一想，使用边框是不必进行检查悬停状态的好方法：P

@Joseph：上次我对某人在 CSS 代码中使用 // cmets 表示不满，我回复说“// 在 Sass/SCSS 中也是有效的注释语法”：P 就我个人而言，我只是将其称为懒惰以标准方式做事（不是你，杰森！）。另外，SO 的语法高亮器将 CSS 突出显示为 CSS，而不是 SCSS，最后我检查了 // 不是有效的注释分隔符。

我同意@BoltClock。我在那里偷懒了！这就是我同意约瑟夫并做出改变的原因。

【参考方案4】：

照凯利说的做……

但是。不要将input 定位为绝对位置，将-20px 置于顶部（只是将其隐藏在页面之外），而是隐藏输入框。

示例：

<input type="checkbox" hidden> 

效果更好，可以放在页面的任何位置。

【讨论】：

啊...想想未来的用户；）不是通行证..；）

感谢您，使用了隐藏复选框的 Kellys 代码。

我认为 IE 会中断