表单/表格

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

也想出现在这里?联系我们
创客云

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

HTML 结构

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

也想出现在这里?联系我们
创客主机
  1. <input type="checkbox" id="checkbox-1" />
  2. <label for="checkbox-1">Check?</label>

当用户点击 label 的时候,实际上是点击了#checkbox-1。

CSS 样式

通过 label 和 checkbox,我们可以将 checkbox 隐藏,而将 label 制作为各种好看的复选框样式。我们可以使用:before 和:after 伪元素来制作各种效果,如滑动按钮的效果。这些效果都可以通过相邻兄弟选择器来选择与 checkbox 相邻的 label 来实现,下面是一个简单的例子:

  1. #checkbox-1 {
  2.     display: none;
  3. }
  4.  
  5. #checkbox-1 + label { 
  6.     color: red;
  7. }
  8.  
  9. #checkbox-1:checked + label {
  10.     color: blue;
  11. }

现在,但用户点击 label 的时候,label 的颜色将由红色变为蓝色。使用这个方法,我们可以制作出各种各样的复选框效果。

浏览器支持

浏览器对该效果的支持还是十分不错的,某些效果需要 CSS 3D,这些效果只有 IE10+的浏览器支持。你可以使用 Modernizr 来检测浏览器对 3D 效果的支持。Modernizr 的使用方法非常简单,你可以下载 Modernizr with CSS 3D Transforms,在页面中引入下载的文件,然后添加下面的代码即可在浏览器支持 3D 效果时才将 checkbox 复选框进行美化。

  1. <script type="text/javascript">
  2. window.onload = function() {
  3.  
  4.   var Modernizr = window.Modernizr;
  5.  
  6.   if(Modernizr.csstransforms3d) { 
  7.  
  8.     var head = document.querySelector('head');
  9.  
  10.     head.innerHTML = head.innerHTML + '<link rel="stylesheet" href="inserthtml.com.radios.css" />';
  11.  
  12.   }
  13. }
  14. </script>

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

  1. <!--[if lte IE 8]>
  2. <link href="ie8.css" rel="stylesheet" />
  3. <![endif]-->
资源下载此资源下载价格为1立即购买,VIP 免费

演示地址 下载地址
收藏
(1)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!