4

如何仅使用 CSS（无 JS 无 JQ）制作自定义复选框，内容：选中时为“on”，未选中时为 content：“off”。

谢谢。

重新编辑

好的，经过大量的复制/粘贴/删除，它现在可以工作了。

感谢。

4

4 回答 4

13 

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;
}
<input type="checkbox" />

于 2012-11-20T02:11:15.230 回答
1

有可能的。查看 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

于 2012-11-20T02:31:16.663 回答
0

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

一个例子：

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

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

于 2012-11-20T02:03:26.457 回答
0

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

是什么让你不想使用 javascript？

于 2012-11-20T02:03:52.160 回答