css3多选界面 |列出css中display的值

/*CSS代码*/
/*将多选框改为开关样式*/
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 50px;
height: 30px;
background: #ddd;
border-radius: 15px;
position: relative;
}
/*设置选中和未选中状态的背景色和圆球位置*/
input[type="checkbox"]:before {
content: "";
width: 24px;
height: 24px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 3px;
left: 3px;
transition: all .3s;
}
input[type="checkbox"]:checked:before {
transform: translateX(20px);
background: #5cb85c;
}

通过CSS3的样式设置，大家可以将多选框变成开关样式，将选中和未选中状态进行区分，并通过动画效果增加用户的视觉体验。

如果需要多选框的样式风格与网站整体的配色风格相符，则可以利用CSS3中的渐变效果进行设置。

/*CSS代码*/
/*设置多选框选中时的背景色*/
input[type="checkbox"]:checked:before {
transform: translateX(20px);
background: linear-gradient(to bottom, #5bc0de, #31b0d5);
}

有了CSS3的多选框样式，相信网页设计会更加精彩。