上一篇提到了将input元素的type设置为radio时（也就是单选框）的自定义，那么将input元素的type为checkbox时，input的自定义显示又将如何处理呢？系统默认的显示方式是勾选，如果我们要达到手机设置界面开关按钮的显示效果，那该如何做到呢？这里为大家提供两种通过CSS来实现的方法。
方法一：使用CSS3新属性appearance
如果读过上一篇关于CSS的文章，读者可能会想到这里也可以使用<label>元素来实现相应的自定义，但是在使用<label>之前这里先介绍一种利用CSS3新特性的一种实现方法，该方法是参考了腾讯公司微信应用的推荐写法。
CSS3添加了一个新属性appearance，所有主流浏览器都不支持 appearance 属性，但是Firefox 支持替代的 -moz-appearance 属性，Safari 和 Chrome 支持替代的 -webkit-appearance 属性。所以在手机浏览器上该属性是都是适用的。将appearance属性设置成“none”将会隐藏<input>的默认显示样式，但是边框的改变和背景的改变依旧可以显示出来。完整的实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
/*switch 按钮*/
.switch-ui{
-webkit-appearance: none; /*隐藏默认的显示样式*/
-moz-appearance: none; /*隐藏默认的显示样式*/
appearance: none; /*隐藏默认的显示样式*/
/* 将<input>显示的形状变成椭圆*/
width: 44px;
height: 24px;
border-radius: 12px;
top: 3px;
position: relative;/*此处设置为relative便于后面的:after和:before通过设置position为absolute来改变相对位置*/
border: 1px solid #dfdfdf;
outline: 0;
box-sizing: border-box;
background: #dfdfdf;
}
.switch-ui:checked {
border-color: #12b7f5;
background-color: #12b7f5;
}
.switch-ui:after, .switch-ui:before {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 22px;
border-radius: 11px;
/* transition 用来设置动画的持续时间，这里的动画类型是transform，即位置偏移动画*/
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
.switch-ui:before {
width: 42px;
}
.switch-ui:after {
width: 22px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
/*checked状态下，:before大小变为0*/
.switch-ui:checked:before {
-webkit-transform: scale(0);
transform: scale(0);
}
/*checked状态下，:after位置向右偏移20px*/
.switch-ui:checked:after {
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
</style>
<title></title>
</head>
<body>
<div class="container">
<form>
<span class="">选项一</span><input type="checkbox" id="switch_1" name="mode" value = "0" class="switch-ui">
<span class="">选项二</span><input type="checkbox" id="switch_2" name="mode" value = "0" class="switch-ui">
</form>
</div>
</body>
</html>
（关键细节的一些说明，可以查看以上代码中的注释）
具体的显示效果如下图
<input>显示的自定义.jpg
方法二：使用<label>元素
虽然使用属性appearance来实现<input>的自定义看上去的显示已经比较完美，但是这种方法其对浏览器的兼容性很不友好，尤其是IE浏览器包括edge浏览器都无法支持。为了提高兼容性，可以使用<label>方法来实现<input>显示的自定义。
该方法与上一篇文章介绍的方法类似，原理都是基于<label>标签存在的特性：当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。完整的实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style>
/*switch 按钮*/
.switch-ui{
display: none;
}
.switch-ui+label{
display: inline-block;/*此处必须要加上这个设置，否则label的宽度显示会有问题*/
/* 将<input>显示的形状变成椭圆*/
width: 44px;
height: 24px;
border-radius: 12px;
top: 3px;
position: relative;/*此处设置为relative便于后面的:after和:before通过设置position为absolute来改变 相对位置*/
border: 1px solid #dfdfdf;
outline: 0;
box-sizing: border-box;
background: #dfdfdf;
}
.switch-ui:checked +label{
border-color: #12b7f5;
background-color: #12b7f5;
}
.switch-ui+label:after {
width: 22px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.switch-ui+label:after, .switch-ui+label:before {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 22px;
border-radius: 11px;
/* transition 用来设置动画的持续时间，这里的动画类型是transform，即位置偏移动画*/
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
.switch-ui+label:before {
width: 42px;
}
/*checked状态下，:before大小变为0*/
.switch-ui:checked+label:before {
-webkit-transform: scale(0);
transform: scale(0);
}
/*checked状态下，:after位置向右偏移20px*/
.switch-ui:checked+label:after {
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
</style>
<title></title>
</head><body>
<div class="container">
<form>
<span class="">选项一</span><input type="checkbox" id="switch_1" value = "0" class="switch-ui" checked><label for="switch_1"></label>
<span class="">选项二</span><input type="checkbox" id="switch_2" value = "1" class="switch-ui"><label for="switch_2"></label>
</form></div>
</body>
</html>
从上面的代码可以看出来，其实大部分CSS属性的设置与第一种方法是一致的，只是CSS的选择器有所更改，从“.switch-ui”变成了“.switch-ui+label”，而.switch-ui自己做了隐藏设置（“display: none; ”），让<label> 代替<input>做显示。
这里的按钮的显示风格只是iOS手机上的switch控件的风格，通过改变.switch-ui 的椭圆的大小以及:after 和:before的大小和位置也可以实现android手机的风格，或者更换背景图实现更多自定义的风格。
网友评论