Question

如何使用内容创建一个仅包含css的自定义复选框（没有JS没有JQ）：选中时为“on”，内容为：“off”时取消选中。

感谢。

重新编辑

好的，在很多复制/粘贴/删除后，it work now。

感谢。

Answer 1

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" />

Answer 2

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

一个例子：

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

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

Answer 3

我认为只用css这是不可能的。 Css修饰一个html元素，不会改变它的属性。如果单击该复选框，该框将必须进行回发以在页面上显示它。在这种情况下，CSS将是相同的。你需要javascript。

是什么让你不想使用javascript？

Answer 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

仅限css复选框（带内容属性）

4 个答案: