仅 CSS 复选框（具有内容属性）答案

【问题标题】：css only checkbox (with content attribute)仅 CSS 复选框（具有内容属性）
【发布时间】：2012-11-08 01:34:54
【问题描述】：

我怎样才能制作一个仅使用 css 的自定义复选框（没有 JS 没有 JQ），内容：选中时为“on”，未选中时为 content:“off”。

谢谢。

重新编辑

好的，在大量复制/粘贴/删除之后，it work now。

谢谢。

【问题讨论】：

HTML怎么样，可以用HTML吗？
你的意思是给它一个样式并改变背景属性？还是我错过了什么
CSS 影响样式，属性不是样式，即使 CSS 可以使用属性（在现代浏览器上）所以我怀疑你可以在没有 JS 的情况下做到这一点。
@Musa 当然，我知道 HTML，哈哈，我很抱歉没有给出明确的细节。
@user1141356 没错，就是这样。

标签： html css checkbox

【解决方案1】：

无法使用 CSS 创建实际元素。但是，您可以使用 css 设置复选框的样式。

一个例子：

input[type=checkbox] {
    outline: 2px solid #f00;
}

在处理不同的浏览器和平台时，依赖纯 CSS 也是一种取舍。我希望这能回答你的问题。

【讨论】：

【解决方案2】：

我相信仅使用 css 是不可能的。 Css 装饰一个 html 元素并且不改变它的属性。如果您单击复选框，则该框必须进行回发才能在页面上显示。在这种情况下，css 将是相同的。你需要javascript。

是什么让你不想使用 javascript？

【讨论】：

大声笑，好吧，老实说，我害怕 JS，尽管实际上我学得对......至少，我会接受的：）

【解决方案3】：

input[type=checkbox] {
    position: relative;
    visibility: hidden;
    cursor: pointer;
}

input[type=checkbox]:after {
    display: block;
    content: "OFF";
    position: absolute;
    top: 0;
    right: -30px;
    visibility: visible;
    height: 30px;
    line-height: 30px;
    width: 50px;
    text-align: center;
    border-radius: 4px;
    background: #d00;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

input[type=checkbox]:checked:after {
    content: "ON";
    background: #0a0;
}

&lt;input type="checkbox" /&gt;

【讨论】：

我非常喜欢这个，不错:)
E X A C T E L Y，我一直在寻找的东西，虽然就像我上面链接的那个，但它与 Firefox 不兼容（我使用的是 Firefox 14）
不错！非常感谢
看起来很棒！有什么建议可以让它在 Edge 上运行？

【解决方案4】：

这是可能的。查看 Ryan Seddon 的这些博客文章。他解释了如何使用复选框和 CSS

http://www.thecssninja.com/css/custom-inputs-using-css

http://www.thecssninja.com/css/futurebox3

http://www.thecssninja.com/css/css-tree-menu

【讨论】：