你见过吗?9款超炫的复选框(Checkbox)效果

  复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框(Checkbox)效果,纯 CSS3 实现,未使用任何图片。

  温馨提示:为保证最佳的效果,请在 IE10 、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

 

 

  前面三款效果都是灵感来自移动应用程序的滑动选择框效果,在选择和未选择状态之间通过滑动来切换效果,非常的动感。效果的实现方面是借用了一个 DIV 标签和一个 Label 标签,下面是效果一的 HTML 代码示例:

  <section title=".slideOne">
<div class="slideOne">  
<input type="checkbox" value="None" id="slideOne" name="check" checked />
<label for="slideOne"></label>
</div>
</section>

  为了实现圆角和复选框的立体感效果,这里运用了 CSS3 的圆角(border-radius)、盒阴影(box-shadow)、渐变(linear-gradient)以及 CSS3 动画技术。下面是效果一的 CSS 代码示例:

.slideOne {
width: 50px;
height: 10px;
background: #333;
margin: 20px auto;
position: relative;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideOne label {
display: block;
width: 16px;
height: 16px;
position: absolute;
top: -3px;
left: -3px;
cursor: pointer;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.slideOne input[type=checkbox] {
visibility: hidden;
}
.slideOne input[type=checkbox]:checked   label {
left: 37px;
}

  后面六款效果的交互是我们常见的,使用 CSS3 对浏览器默认的复选框效果进行了美化,并且在各个浏览器中表现一致。HTML 代码都是类似的,这里例举效果五的代码:

<section title=".roundedTwo">
<!-- .roundedTwo -->
<div class="roundedTwo">
<input type="checkbox" value="None" id="roundedTwo" name="check" checked />
<label for="roundedTwo"></label>
</div>
<!-- end .roundedTwo -->
</section>

  CSS 代码如下:

.roundedTwo label {
width: 20px;
height: 20px;
position: absolute;
top: 4px;
left: 4px;
cursor: pointer;
background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedTwo label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 5px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.roundedTwo label:hover::after {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
.roundedTwo input[type=checkbox] {
visibility: hidden;
}
.roundedTwo input[type=checkbox]:checked   label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}

  

源码下载      在线演示

 

您可能感兴趣的相关文章
  • 期待已久的2013年度最佳 jQuery 插件揭晓
  • 赞!史上最全的浏览器 CSS & JS Hack 手册
  • 10大流行的 Metro UI 风格 Bootstrap 主题
  • 推荐35款精致的 CSS3 和 HTML5 网页模板
  • 精选12款优秀 jQuery Ajax 分页插件和教程

 

本文链接:你见过吗?9款超炫的复选框(Checkbox)效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统制成docker镜像_docker镜像原理 镜像制作 dockerfile

为什么一个centos镜像只有两百多兆&#xff0c;而tomcat镜像五百多兆1.先说说操作系统操作系统组成部分&#xff1a;进程调度子系统进程通信子系统内存管理子系统设备管理子系统文件管理子系统网络通信子系统作业控制子系统Linux文件系统由bootfs和rootfs两部分组成bootfs&…

linux的vi命令详解,Linux上Vi命令详解

Linux下Vi命令详解补充一点&#xff1a;在vi中使用命令的方法是&#xff1a;冒号命令回车&#xff0c;如:q 回车代表退出。这里有一本0分下载关于Vi详细介绍的书&#xff1a;http://download.csdn.net/detail/zqiang_55/4399731文本编辑器是所有计算机系统中最常用的一种工具。…

jpg、gif、png-8、png-24的区别

一、gif格式的特点 1、透明性。gif是一种布尔透明类型&#xff0c;即它可以是全透明&#xff0c;也可以是全不透明&#xff0c;但是没有半透明 2、动画。gif支持动画 3、无损耗性。gif是一种无损耗的图像格式&#xff0c;这意味着你可以对gif图片做任何操作也不会使图片质量产生…

Java依赖注入选项

我想花一些时间来总结一些流行的Java依赖注入&#xff08;DI&#xff09;框架。 这是可用功能的高级概述。 首先&#xff0c;什么是依赖注入&#xff1f; “依赖注入是一种软件设计模式&#xff0c;可以删除硬编码的依赖&#xff0c;并可以在运行时或编译时更改它们。” – 维…

实用技巧:使用 Google Analytics 跟踪 JS 错误

Google Analytics&#xff08;谷歌分析&#xff09;不仅仅是一个流量统计工具&#xff0c;你还可以用它来测量广告活动的有效性&#xff0c;跟踪用户多远到所需的页面流&#xff08;从点击广告到购物车到结账页面&#xff09;获取&#xff0c;并基于用户的信息设置浏览器和语言…

从Ubuntu 14.04 LTS版升级到Ubuntu 16.04 LTS

Ubuntu 16.04 (Xerial Xerus) Long Term Support版于最近发布了。要想了解它的新功能和新特性&#xff0c;就必须升级或安装这个新系统。 本文讲述怎样一步步从Ubuntu 14.04 LTS版升级到Ubuntu 16.04 LTS版。要注意在升级前做好重要数据的备份&#xff0c;以免造成数据损失。因…

finditerable 转list_java – 通过拆分和运行将ListenableFuture转换为Iterable

(替代my original answer)但是,如果转型是缓慢的,或者某些输入可能会失败但是对其他输入成功会怎么样&#xff1f;在这种情况下,我们希望单独转换每个输出.另外,我们希望确保转换只发生一次.我们的集合转换方法不能保证这一点.因此,在您的示例代码中,输出上的每次迭代都会向执行…

linux 的date命令详解,linux之date命令详解

时间方面 :% : 印出% %n : 下一行%t : 跳格%H : 小时(00..23)%I : 小时(01..12)%k : 小时(0..23)%l : 小时(1..12)%M : 分钟(00..59)%p : 显示本地 AM 或 PM%r : 直接显示时间 (12 小时制&#xff0c;格式为 hh:mm:ss [AP]M)%s : 从 1970 年 1 月 1 日 00:00:00 UTC 到目前为止…

Java 8:对集合中的值进行排序

意识到Java 8将在接下来的几周内发布其GA版本之后&#xff0c;我认为现在是时候来看看它了&#xff0c;在过去的一周里&#xff0c;我一直在阅读Venkat Subramaniam的书 。 我要讲的是第3章&#xff0c;其中涉及对人员集合进行排序。 Person类的定义大致如下&#xff1a; sta…

html的table弹窗_Js弹出基于Table的可关闭浮动层

可以拖动和隐藏的层&#xff0c;替代弹出窗口isIEdocument.all;isNN!document.all&&document.getElementById;isN4document.layers;isHotfalse;function ddInit(e){topDogisIE ? "BODY" : "HTML";whichDogisIE ? document.all.theLayer : docume…

Linux装ntfs后内存不够,Linux_安装Ubuntu后无法使用NTFS硬盘或移动硬盘,  在安装Ubuntu系统后,存在 - phpStudy...

安装Ubuntu后无法使用NTFS硬盘或移动硬盘在安装Ubuntu系统后&#xff0c;存在无法使用NTFS硬盘或移动硬盘的问题&#xff0c;下面小编就给大家介绍下Ubuntu系统无法挂载NTFS的解决方法&#xff0c;不知如何挂载的朋友不妨来了解下。具体问题如下图所示&#xff1a;“Please res…

TJOI2018Party

题目描述 小豆参加了\(NOI\)的游园会&#xff0c;会场上每完成一个项目就会获得一个奖章&#xff0c;奖章 只会是\(N\), \(O\), \(I\)的字样。在会场上他收集到了\(K\)个奖章组成的串。 兑奖规则是奖章串和兑奖串的最长公共子序列长度为小豆最后奖励的等级。 现在已知兑奖串长度…

HTML5 Dashboard – 那些让你激动的 Web 技术

HTML5 Dashboard 是一个 Mozilla 推出的项目&#xff0c;里面展示了最前沿的 HTML5&#xff0c;CSS3&#xff0c;JavaScript 技术。每一项技术都有简洁&#xff0c;在线演示以及详细的文档链接。这些技术将成为未来一段时间 Web 开发的顶尖技术&#xff0c;如果不想落伍的话就赶…

通过自动回复机器人学Mybatis---基础版

第1章 案例简介 介绍要实现的案例情况&#xff0c;后面会通过这个案例来学习 Mybatis第2章 实战第一部----黎明前的黑暗 在没有 Mybatis 的情况下&#xff0c;使用 Jsp Servlet Jdbc 实现案例中的一个模块开发流程1&#xff1a; 开发流程2&#xff1a; 开发流程3&#xff1a;…

部署到Maven中央存储库

您需要使您的Java库公开访问吗&#xff1f; 您的项目托管在GitHub上吗&#xff1f; 您是否喜欢“将所有功能都部署到Maven Central Repository”按钮的想法&#xff1f; 我将展示如何使用maven-release-plugin进行设置 。 源代码托管在GitHub上&#xff0c;因此还将描述对源代码…

Scroll Depth – 衡量页面滚动的 Google 分析插件

Scroll Depth 是一个小型的 Google Analytics&#xff08;谷歌分析&#xff09;插件&#xff0c;可以让你衡量用户在页面上滚动了多远。它可以监控 25%、50%、75% 和 100% 四个滚动点&#xff0c;并发送谷歌分析事件。 您还可以跟踪页面上的特定元素是否滚动到视图中。例如在博…

aws ec2时间_AWS中自动化的三大领域,以避免支付过多的云账单

AWS是全球最常用的云服务之一。 Gartner Magic Quadrant将AWS评为最大的IaaS提供商。每个可能的域都由企业使用AWS服务。 全球约有 1,000,000家公司正在使用AWS作为其IaaS提供商。从Netflix到Unilever再到Met Office&#xff0c;每个人都转移到AWS上的云基础架构。既然您正在阅…

linux vector 头文件,LINUX 之Vector用法

在Linux开发过程中常用到的一个功能----列表显示.如何将中心数据进行列表显示呢?这里就用到了VECTOR容器.从中心获取的数据通过VECTOR容器传输给站点程序从而实现批量数据的传输.VECTOR容器常用的函数包括以下几个1.push_back函数函数原型:void push_back(const T& x);实现…

MySQl的一些基本知识(1)

数据库优化操作&#xff1a; MySQL优化 数据库优化维度有四个: 硬件、系统配置、数据库表结构、SQL及索引 优化成本: 硬件>系统配置>数据库表结构>SQL及索引 优化效果: 硬件<系统配置<数据库表结构<SQL及索引 运行机制原理和底层架构 MySQL的查询优化&#x…

将一个word文档按一页或多页拆分成多个文档

工作中&#xff0c;有时候碰到需要将一个比较大的word按照指定的页数分割成若干个小的word文档&#xff0c;下面提供分割的方法供参考&#xff1a; 一、按照单页拆分 1、在Word里面打开那个需要分割的文档&#xff08;假设它的文件名叫做“test.doc”&#xff09;&#xff1b; …