不知道小伙伴们在使用复选框(checkbox)的时候有没有觉得默认的样式实在太丑了,自己想换一个好看点的样式又感觉挺麻烦的,前几天博主就遇到了这个麻烦,然后翻阅了书籍找到了解决方法,现在和大家分享一下
我们先看一下复选框的默认样式,这种默认的复选框样式还是不够美观的,那么下面我们把它美化一下
有一个元素和复选框是形影不离、息息相关的,那就是<label>,当<label>元素和复选框关联之后,也可以起到触发开关的作用
我们可以为label添加伪元素,并基于复选框的状态来为其设置样式,然后就可以把真正的复选框隐藏起来,再把伪元素的内容进行美化,用来顶替原来的复选框~
从下面一段代码开始:
<input type="checkbox" id="check-box" />
<label for="check-box">哈哈哈哈</label>
然后我们在label的前面生成一个伪元素,作为美化版的复选框,并加上样式:
input[type="checkbox"] + label::before {
content: '\a0'; /* 不换行空格 */
display: inline-block;
vertical-align: .1em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65; }
现在的页面是这样的:
现在可以看见那个伪元素了,复选框仍然可见,我们等一下把它隐藏,我们先给复选框的勾选状态加上不同的样式:
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen; }
正如上图所示,现在样式已经出来了,我们再将原来的复选框隐藏掉,注意不能使用display:none来隐藏,因为那样会
把它从键盘tab键切换焦点的队列中完全删除,我们用下面的方法来隐藏:
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
clip属性对元素进行裁剪,这里我们把复选框全部裁剪掉,不了解用法的小朋友可以自行查阅~
现在就得到下面的样式啦:
我们还可以进行进一步的优化,比如在聚焦或者禁用的时候改变它的样式:
input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 .1em .1em #58a; }
input[type="checkbox"]:disabled + label::before {
background: gray;
box-shadow: none;
color: #555; }