html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效
果
这是⼀款效果⾮常酷的CSS3复选框checkbox样式美化效果。该复选框美化效果共有11种。默认的复选框的样式⼗分不好看，该效果将复选框加⼀美化，带上了⼀些动画效果，其中⼀些制作为滑动按钮的样式。
使⽤⽅法
HTML结构
该复选框美化效果的HTML结构如下：
Check?
当⽤户点击label的时候，实际上是点击了#checkbox-1。
CSS样式
通过label和checkbox，我们可以将checkbox隐藏，⽽将label制作为各种好看的复选框样式。我们可以
使⽤:before和:after伪元素来制作各种效果，如滑动按钮的效果。这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实现，下⾯是⼀个简单的例⼦：
#checkbox-1 {
display: none;
}
#checkbox-1 + label {
color: red;
}
#checkbox-1:checked + label {
color: blue;
}
现在，但⽤户点击label的时候，label的颜⾊将由红⾊变为蓝⾊。使⽤这个⽅法，我们可以制作出各种各样的复选框效果。
浏览器⽀持
浏览器对该效果的⽀持还是⼗分不错的，某些效果需要CSS 3D，这些效果只有IE10+的浏览器⽀持。你可以使⽤Modernizr来检测浏览器对3D效果的⽀持。Modernizr的使⽤⽅法⾮常简单，你可以下载Modernizr with CSS 3D Transforms，在页⾯中引⼊下载的⽂件，然后添加下⾯的代码即可在浏览器⽀持3D效果时才将checkbox复选框进⾏美化。
var Modernizr = window.Modernizr;
if(Modernizr.csstransforms3d) {html5颜代码
var head = document.querySelector('head');
head.innerHTML = head.innerHTML + '';
}
}
不带3D transforms效果的美化复选框可以在IE9+浏览器中⽀持⼯作。如果要⽀持IE8及以下的浏览器，可以提供⼀个回退代码，使复选框在IE8及以下的浏览器中显⽰为普通的HTML复选框样式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。