我如何仅使用 css(没有 JS 没有 JQ)制作一个自定义复选框,内容:选中时为“on”,未选中时为“off”。
谢谢。
重新编辑
好的,在大量复制/粘贴/删除之后,it work now .
谢谢。
最佳答案
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" />
关于html - css only 复选框(带有内容属性),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13465507/