当前位置：首页 > 网页特效 > 选择框

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

分类：选择框日期：2024-05-14 点击(3) 评论(0)

简介

##### HTML结构
该复选框美化效果的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来实现，下面是一个简单的例子：

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

```html
<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复选框样式。

```html

```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果