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复选框进行美化。

window.onload = function() {

var Modernizr = window.Modernizr;

if(Modernizr.csstransforms3d) {

var head = document.querySelector('head');

head.innerHTML = head.innerHTML + '';

}

}

不带3D transforms效果的美化复选框可以在IE9+浏览器中支持工作。如果要支持IE8及以下的浏览器，可以提供一个回退代码，使复选框在IE8及以下的浏览器中显示为普通的HTML复选框样式。