css only复选框（带内容属性） [英] css only checkbox (with content attribute)

问题描述

如何使用css（仅限无JS JQ）的自定义复选框：on和

确定，在复制/粘贴/删除后， it work now 。

谢谢。

解决方案

  input [type = checkbox] {position：relative; visibility：hidden; cursor：pointer;} input [type = checkbox]：after {display：block;内容：OFF; position：absolute; top：0;右：-30px;可见度; height：30px; line-height：30px; width：50px; text-align：center; border-radius：4px;背景：＃d00; color：#fff; font-weight：600; cursor：pointer;} input [type = checkbox]：checked：after {content：ON;背景：＃0a0;}  

 < input type =复选框/>  

how can I make a custom checkbox with css only (no JS no JQ) with content:"on" when checked and content:"off" when uncheked.

Thanks.

reedit

OK, after LOT of copy/paste/delete, it work now.

Thank.

解决方案

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

这篇关于css only复选框（带内容属性）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！