CSS 中我们可以通过样式来改变窗体中的组件,其中就包括复选框。input[type= checkbox ] { /* 隐藏原有的复选框 */ display: none; } input[type=
CSS 中我们可以通过样式来改变窗体中的组件,其中就包括复选框。
input[type="checkbox"] { /* 隐藏原有的复选框 */ display: none; } input[type="checkbox"] + label:before { content: ""; display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 5px; border-radius: 2px; border: 2px solid #ccc; } input[type="checkbox"]:checked + label:before { content: "2714"; text-align: center; line-height: 16px; color: #fff; background-color: #007bff; }
代码中首先使用display: none;
来隐藏原有的复选框,接着使用:before
伪类来设置托盘的样式。设置text-align: center;
可以使得内容垂直居中。改变背景颜色可以使得选中状态更为明显。
除此之外,我们还可以使用图片或者 SVG 来自定义复选框的样式,只需要将其作为background-image
或者content
来设置即可。
粉丝
0
关注
0
收藏
0