11种炫酷CSS3复选框checkbox样式美化效果

这是一款效果非常酷的CSS3复选框checkbox样式美化效果。该复选框美化效果共有11种。默认的复选框的样式十分不好看，该效果将复选框加一美化，带上了一些动画效果，其中一些制作为滑动按钮的样式。

使用方法

HTML结构

该复选框美化效果的HTML结构如下：

<input type="checkbox" id="checkbox-1" />
<label for="checkbox-1">Check?</label>              
              

当用户点击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复选框进行美化。

<script type="text/javascript">
window.onload = function() {

  var Modernizr = window.Modernizr;
  
  if(Modernizr.csstransforms3d) { 
    
    var head = document.querySelector('head');
    
    head.innerHTML = head.innerHTML + '<link rel="stylesheet" href="inserthtml.com.radios.css" />';
    
  }
}
</script>                
              

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

<!--[if lte IE 8]>
<link href="ie8.css" rel="stylesheet" />
<![endif]-->