分享程序员开发的那些事...
更新时间：2023-01-27 20:40:23
我总是使用伪元素：之前和：之后用于更改复选框和单选按钮的外观。它就像一个魅力。
请参阅此 link 了解更多信息
步骤
visibility：hidden 或 opacity：0 或 position：absolute; left：-9999px etc。创建一个假复选框：before 元素并传递一个空的或不间断的空格'\ 00a0'; ：已选中状态，传递unicode 内容：\ 2713，这是一个复选标记; ：focus 样式以使该复选框可用。我是这样做的。
.box {background：＃666666;颜色：#ffffff; width：250px;填充：10px; margin：1em auto;} p {margin：1.5em 0; padding：0;} input [type =checkbox] {visibility：hidden;} label {cursor：pointer;} input [type =checkbox] + label：before {border：1px solid＃333;内容：\00a0;显示：inline-block; font：16px / 1em sans-serif; height：16px;保证金：0 .25em 0 0;填充：0; vertical-align：top; width：16px;} input [type =checkbox]：checked + label：before {background：#fff;颜色：＃333;内容：\2713; text-align：center;} input [type =checkbox]：checked + label：after {font-weight：bold;} input [type =checkbox]：focus + label :: before {outline：rgb（59 ，153,252）auto 5px;}
< div类= 内容 > < div class =box> < p为H. < input type =checkboxid =c1name =cb> < label for =c1>选项01< / label> < / p为H. < p为H. < input type =checkboxid =c2name =cb> < label for =c2>选项02< / label> < / p为H. < p为H. < input type =checkboxid =c3name =cb> < label for =c3>选项03< / label> < / p为H. < / div>< / div>