html - css only 复选框(带有内容属性)

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