/* CSS3选项框通用样式 */
.input-checkbox {
position: relative;
display: inline-block;
cursor: pointer;
padding-left: 25px;
margin-right: 20px;
font-size: 16px;
line-height: 1.5;
user-select: none;
}
/* 模拟选项框 */
.input-checkbox::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 1px solid #aaa;
background-color: #fff;
}
/* 选项框勾选状态 */
.input-checkbox input:checked + ::before {
content: "\2713"; /* unicode码，表示勾号 */
color: #fff;
background-color: #3b8cff;
border: none;
}
/* 选项框实现方式 */
<label class="input-checkbox">
<input type="checkbox" name="option1" value="1">
<span>选项1</span>
</label>上述代码实现了一个简单的CSS3选项框，根据需要进行修改即可。此外，大家还可以通过CSS3实现更多的选项框效果，比如半选中状态、锁定状态等。