样式化复选框(Styling Checkbox)
复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样:
选中状态 未选状态
这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式。以往只有少数浏览器才支持对这类控件应用样式,比如拿到这样一张设计图:
blue.png
在过去,想要通过简单地修改样式达成这种设计效果根本不行,不过,现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能力:
这样设置该属性值为input[type="checkbox"] { -webkit-appearance: none; }
通过结合使用状态伪类选择器
此时点击复选框,可以看到复选框样式的变化效果,另外,根据那张设计图片所示还得加上获取焦点,禁用等状态的样式:
input[type="checkbox"]:focus, input[type="checkbox"]:hover { background-position: -24px 0; outline: none; } input[type="checkbox"]:checked { background-position: -48px 0; } input[type="checkbox"][disabled] { background-position: -72px 0; } input[type="checkbox"][disabled]:checked { background-position: -96px 0; }
因为图片已经事先合并成一张了,简单修改一下
兼容性
目前只兼容 Webkit 系列浏览器;虽然 Firefox 也实现了替代的
input[type="checkbox"] { background: #fff url(i/blue.png); background: none\0; *background: none; ... }
为了兼容更多的主流浏览器,需要寻求另外的解决方案,在所有主流浏览器里,点击关联某个复选框的 label 时,产生的效果和点击元素自身相同,会切换复选框控件的选中状态。浏览器的这种行为给了我们一个至关重要的挂钩,既然能依靠 label 元素来控制原生复选框的状态,那么就可以不必直接操作实际的复选框元素,而把操作和样式都转移到与之关联的 label 元素上去:
<input id="example" type="checkbox"> <label for="example"></label>
确保 label 元素的
input[type="checkbox"] + label:before { background: #fff url(i/blue.png); content: " "; height: 22px; left: 0; position: absolute; width: 22px; }
有了样式化的 label 元素来提供交互,原生的 checkbox 控件就显得有点多余了,虽然可以用
input[type="checkbox"] { box-sizing: border-box; left: 4px; margin: 0; padding: 0; position: absolute; top: 3px; }
图片要足够大能将原生的 checkbox 控件完全遮挡住,因为这里用到了绝对定位,所以需要增加一个定位参照:
<!-- HTML --> <div class="checkbox"> <input id="exampleCheckbox" type="checkbox"> <label for="exampleCheckbox"></label> </div> /* CSS */ .checkbox { min-height: 24px; padding-left: 24px; position: relative; }
左边预留内边距是为了排版更美观,同时,和之前一样,搭配上其它状态下的样式:
input[type="checkbox"]:focus + label:before, input[type="checkbox"] + label:hover:before { background-position: -24px 0; } input[type="checkbox"]:checked + label:before { background-position: -48px 0; } input[type="checkbox"][disabled] + label:before { background-position: -72px 0; } input[type="checkbox"][disabled]:checked + label:before { background-position: -96px 0; }
兼容性
只要支持 CSS3 selectors 的浏览器基本上都能兼容,同时具备原生控件的绝大多数交互特性。IE 8 不支持
input[type="checkbox"] + label::before { ... }
关于伪元素生成内容的兼容性见 CSS Generated content for pseudo-elements。诚然,上面的方法假设了支持
input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before { background: #fff url(i/blue.png); content: " "; height: 22px; left: 0; position: absolute; width: 22px; } input[type="checkbox"]:not(:checked):focus + label:before, input[type="checkbox"]:not(:checked) + label:hover:before { background-position: -24px 0; } input[type="checkbox"]:checked + label:before { background-position: -48px 0; } input[type="checkbox"][disabled]:not(:checked) + label:before { background-position: -72px 0; } input[type="checkbox"][disabled]:checked + label:before { background-position: -96px 0; }
查看简单示例,对于那些并不支持
// jQuery $('input[type="checkbox"]').on('change', function() { $(this)[$(this).prop('checked') ? 'addClass' : 'removeClass']('checked'); }); /* CSS */ input[type="checkbox"].checked + label:before { ... }
有了前面的基础,要制作类似于开关按钮的控件也是非常简单的了,还是熟悉的结构:
<div class="checkbox"> <input id="example" type="checkbox"> <label for="example">Check</label> </div>
首先勾勒出开关的形状,一个圆角矩形中间放一个圆形按钮:
选中的效果只要简单修改下外框的背景色和中间按钮的位置就行:
input[type="checkbox"]:checked + label { background-color: #8c8; } input[type="checkbox"]:checked + label:after { left: 26px; }
不过这种跳跃式变化实在是太生硬了,添加点过渡效果,看上去更平滑:
input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label { -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after { -webkit-transition: left 0.3s; transition: left 0.3s; }
点击就能看到效果,对于中间的按钮部分使用
input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after { -webkit-transition:left-webkit-transform 0.3s; -o-transition: -o-transform 0.3s; transition:lefttransform 0.3s; } input[type="checkbox"]:checked + label:after {left: 26px;-webkit-transform: translateX(24px); -ms-transform: translateX(24px); -o-transform: translateX(24px); transform: translateX(24px); }
不支持
input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label { (-prefix-)user-select: none; }
这里的浏览器厂商前缀根据需要替换成相应的,查看简单示例。当然还需要提供聚焦以及禁用等状态的样式,就不在这里重复了。以上所有技术可同时适用于单选框(radio)。