自学篇之-纯css做的漂亮的单选框复选框样式_html/css_WEB-ITnose

[id^="checkbox-"] + label {
 background-color: #FFF;
 padding: 11px 9px;
 border-radius: 7px;
 display: inline-block;
 position: relative;
 margin-right: 30px;
 background: #F7836D;
 width: 88px;
 height: 13px;
 box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(245, 146, 146, 0.4);
}

立即学习“前端免费学习笔记（深入）”；

[id^="checkbox-"] + label:before {
 content: ' ';
 position: absolute;
 background: #FFF;
 top: 0px;
 z-index: 99999;
 left: 0px;
 width: 24px;
 color: #FFF;
 height: 35px;
 border-radius: 7px;
 box-shadow: 0 0 1px rgba(0,0,0,0.6);
}

[id^="checkbox-"] + label:after {
 content: '禁止';
 position: absolute;
 top: 7px;
 left: 37px;
 font-size: 1.2em;
 color: white;
 font-weight: bold;
 left: 8px;
 padding: 5px;
 top: 4px;
 border-radius: 100px;
}

[id^="checkbox-"]:checked + label {
 background: #67A5DF;
 box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(146, 196, 245, 0.4);
}

[id^="checkbox-"]:checked + label:after {
 content: '允许';
 left: 6px;
}

[id^="checkbox-"]:checked + label:before {
 content: ' ';
 position: absolute;
 z-index: 99999;
 left: 82px;
}

[id^="checkbox-"] + label:after {
 left: 35px; 
} 

v0.dev

Vercel推出的AI生成式UI工具，通过文本描述生成UI组件代码

下载

.radio +label{
position: relative;
display: inline-block;
z-index: 999;
width: 12px;
height: 25px;
padding: 3px 29px;
}

.radio+label:before{
 content:"";
 color:#fff; 
 width: 20px;
 height: 20px;
 background: #777980;
 border-radius: 15px;
 position: absolute;
 top: 4px;
 left: 4px;
 display:block;
 box-shadow: 0px 0px 3px #A19797;
}
.radio:checked+label:before{
content:"";
background: #1caf9a;
}
.radio+label:after{
 content: attr(title);
 width: 8px;
 height: 8px;
 display:block;
 border: 3px solid #F7F9F9;
position: absolute;
top: 7px;
left: 7px;
border-radius: 7px;
background: #777980;
box-shadow: 0px 0px 3px #F2EBEB;
}
.radio:checked+label:after{
background: #1caf9a;
}

利用复选框做开关