超炫的复选框（CheckBox）效果研究及实践

最新推荐文章于 2022-04-20 20:39:03 发布
最新推荐文章于 2022-04-20 20:39:03 发布
阅读量514 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/had_meno/article/details/53579656
版权

在”前端里“发现了”9款超炫的 CSS3 复选框（Checkbox)“的源码，网址为http://www.yyyweb.com/3103.html，可进行在线演示以及源码下载。

9种CSS3复选框效果如下所示：


而我特选其中的一种先进行研究并加以实践：


我选择的效果是第三种：

源码如下，并加以注释：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	/* .slideThree */
	.slideThree {
	  width: 80px;
	  height: 26px;
	  background: #333;
	  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);
	}
	/* OFF */
	.slideThree:after {
	  content: 'OFF';
	  color: #000;
	  position: absolute;
	  right: 10px;
	  z-index: 0;
	  font: 12px/26px Arial, sans-serif;
	  font-weight: bold;
	  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
	}
	/* ON */
	.slideThree:before {
	  content: 'ON';
	  color: #00bf00;
	  position: absolute;
	  left: 10px;
	  z-index: 0;
	  font: 12px/26px Arial, sans-serif;
	  font-weight: bold;
	}
	/* 滑动的按钮 跟checkbox相连 */
	.slideThree label {
	  display: block;
	  width: 34px;
	  height: 20px;
	  cursor: pointer;
	  position: absolute;
	  top: 3px;
	  left: 3px;
	  z-index: 1;
	  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-transition: all 0.4s ease;
	  -o-transition: all 0.4s ease;
	  -webkit-transition: all 0.4s ease;
	  transition: all 0.4s ease;
	  -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);
	}
	.slideThree input[type=checkbox] {
	  visibility: hidden;
	}
	.slideThree input[type=checkbox]:checked + label {
	  left: 43px;
	}
	/* end .slideThree */
</style>
</head>

<body>
    <div class="slideThree">  
      <input type="checkbox" value="None" id="slideThree" name="check" checked />
      <label for="slideThree"></label>
    </div>
</body>
</html>

效果如下：


然后我就在网上找相关按钮的UI模板psd素材，网址为http://www.58pic.com/wangye/15678651.html

模板如下：


我选择了第一种样式进行了实践，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	/* .slideThree */
	.slideThree {
	  width: 122px;
	  height: 38px;
	  position: relative;
	  /* 圆角兼容性 */
	  -moz-border-radius: 10px;
	  -webkit-border-radius: 10px;   
	  border-radius: 10px;
	  background: #ddd; 
	  -moz-box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.29);
	  -webkit-box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.29);
	  box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.29);
	}
	.slideThree:after { 
	  content: 'OFF';
	  color: #8b8b8b;
	  position: absolute;
	  right: 18px;
	  z-index: 0;
	  font: 16px/38px Arial, sans-serif;
	  font-weight: bold;
	  text-shadow: 1px 1px 1px rgb(255, 255, 255);
	}
	.slideThree:before { 
	  content: 'ON';
	  color: #fff;
	  position: absolute;
	  left: 18px;
	  z-index: 0;
	  font: 16px/38px Arial, sans-serif;
	  font-weight: bold;
	  text-shadow: 1px 1px 1px rgb(0, 0, 0);
	}
	.slideThree label {
	  display: block;
	  width: 64px;
	  height: 38px;
	  cursor: pointer;
	  position: absolute;
	  top: -1px;
	  left: 0;
	  z-index: 1;
	  background: #fcfff4;
	  /* 按钮圆角 */
	  -moz-border-radius: 10px;
	  -webkit-border-radius: 10px;
	  border-radius: 10px;
	  /* 按钮背景 */
	  background: #f4f4f3;
	  background: -moz-linear-gradient(top, #fdfdfd, #f3f3f3);
	  background: -webkit-linear-gradient(top,#fdfdfd, #f3f3f3);
	  background: linear-gradient(to bottom,#fdfdfd, #f3f3f3);
	  /* 按钮过渡 */
	  -moz-transition: all 0.4s ease;
	  -o-transition: all 0.4s ease;
	  -webkit-transition: all 0.4s ease;
	  transition: all 0.4s ease;
	  border:1px solid #d4d4d4;
	}
	.slideThree input[type=checkbox] {
	  visibility: hidden;
	}
	.slideThree input[type=checkbox]:checked + label {
	  left: 58px;
	}
	/* end .slideThree */
</style>
</head>
<body>
    <div class="slideThree">  
      <input type="checkbox" value="None" id="slideThree" name="check" checked />
      <label for="slideThree"></label>
    </div>
</body>
</html>

效果如图：


对于模板中的ON状态背景色为蓝色，OFF状态背景色为灰的情况的处理上遇到了些问题，有尝试在“before”,"after"里修改代码，但是效果不佳，先以JS程序进行实现，但效果也差强人意，待有更好方式再进行更新。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
<title>无标题文档</title>
<style>
	/* .slideThree */
	.slideThree {
	  width: 122px;
	  height: 38px;
	  position: relative;
	  /* 圆角兼容性 */
	  -moz-border-radius: 10px;
	  -webkit-border-radius: 10px;   
	  border-radius: 10px;
	  /* ON状态下 */
	  background:#3daae7;
	  -moz-box-shadow: inset 0px 0px 13px rgba(45, 82, 142, 0.47);
	  -webkit-box-shadow: inset 0px 0px 13px rgba(45, 82, 142, 0.47);
	  box-shadow: inset 0px 0px 13px rgba(45, 82, 142, 0.47);
	  overflow:hidden;
	  /* OFF状态下 */
	  /*background: #ddd; 
	  -moz-box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.29);
	  -webkit-box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.29);
	  box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.29);*/
	}
	.slideThree1 {
	  background: #ddd; 
	  -moz-box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.29);
	  -webkit-box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.29);
	  box-shadow: inset 0px 0px 16px rgba(0, 0, 0, 0.29);
	}
	.slideThree:after { 
	  content: 'OFF';
	  color: #8b8b8b;
	  position: absolute;
	  right:18px;
	  z-index: 0;
	  font: 16px/38px Arial, sans-serif;
	  font-weight: bold;
	  text-shadow: 1px 1px 1px rgb(255, 255, 255);
	}
	.slideThree:before { 
	  content: 'ON';
	  color: #fff;
	  position: absolute;
	  left: 18px;
	  z-index: 0;
	  font: 16px/38px Arial, sans-serif;
	  font-weight: bold;
	  text-shadow: 1px 1px 1px rgb(0, 0, 0);
	}
	.slideThree label {
	  display: block;
	  width: 64px;
	  height: 36px;
	  cursor: pointer;
	  position: absolute;
	  top: 0;
	  left: 0;
	  z-index: 1;
	  background: #fcfff4;
	  /* 按钮圆角 */
	  -moz-border-radius: 10px;
	  -webkit-border-radius: 10px;
	  border-radius: 10px;
	  /* 按钮背景 */
	  background: #f4f4f3;
	  background: -moz-linear-gradient(top, #fdfdfd, #f3f3f3);
	  background: -webkit-linear-gradient(top,#fdfdfd, #f3f3f3);
	  background: linear-gradient(to bottom,#fdfdfd, #f3f3f3);
	  /* 按钮过渡 */
	  -moz-transition: all 0.4s ease;
	  -o-transition: all 0.4s ease;
	  -webkit-transition: all 0.4s ease;
	  transition: all 0.4s ease;
	  border:1px solid #d4d4d4;
	}
	.slideThree input[type=checkbox] {
	  visibility: hidden;
	}
	.slideThree input[type=checkbox]:checked + label {
	  left: 56px;
	}
	/* end .slideThree */
</style>
<script type="text/javascript">
	$(function(){
		$($('#slideThree')).click(function(){
			if($("input[type='checkbox']").is(':checked'))
			{
				$('.slideThree').removeClass('slideThree1');
			}
			else
			{
				$('.slideThree').addClass('slideThree1');
			}
		});
		
	});
</script>
</head>
<body>
    <div class="slideThree">  
      <input type="checkbox" value="None" id="slideThree" name="check" checked />
      <label for="slideThree"></label>
    </div>
</body>
</html>
效果如下：



had_meno
关注
Pygame小工具：复选框（Checkbox）
weixin_42487713的博客
02-05 2209
Pygame小工具，实现Checkbox功能
利用Bootstrap实现表格复选框checkbox全选
08-31
在本文中，我们将探讨如何利用Bootstrap这一流行的前端框架来实现表格中的复选框全选功能。Bootstrap是由Twitter开发的，它提供了一套响应式布局、移动设备优先的WEB开发工具，使得网页设计更加简单和快捷。 要实现...
你见过吗？9款超炫的复选框（Checkbox）效果
weixin_34124651的博客
04-21 392
　　复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框（Checkbox）效果，纯 CSS3 实现，未使用任何图片。 　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。     　　前面三款效果都是灵感来自...
JavaScript实践：点击CheckBox显示/隐藏Details
weixin_33953384的博客
12-08 152
用一个CheckBox作为Flag，当选中Flag时，才会显示具体信息。 方法： 使用JavaScript的方法 具体： 页面代码：把需要显示/隐藏的<tr>设一个ID，如： <tr id="WithinPkgs1" style="display: none;"> <tr id="WithinPkgs2" style="display: none;...
checkbox效果
yb305
08-26 118
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选中标签forcheck</title> <script src="./js/jquery-2.1.1.min.js"></script> <style type="text/css"> .riskSources label { cursor: pointer;.
自定义实现复选框效果
高先生的猫
04-27 282
在开发中，表单中经常会用到复选框，但是HTML原生自带的复选框样式真是太丑陋了，往往是无法满足需求的，因此需要通过HTML、CSS、JS来模拟复选框的效果，来实现需求样式。 结构 <span class="base" id="target"></span> 样式 .base{ position: relative; display: inli...
jquery获取复选框checkbox的值的简单实现方法
10-22
在进行Web前端开发时，常常需要处理表单中的复选框（checkbox）元素，以便获取用户的选择数据。使用jQuery库可以方便地实现这一功能，尤其是当我们需要对一组具有相同名称的复选框进行操作时。jQuery提供了一些选择...
jquery获取复选框checkbox的值实现方法
11-24
:checked ：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) js： //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象，返回数组 var s=...
超炫的复选框效果源码
10-24
"超炫的复选框效果源码"就是为了解决这个问题，提供了一套自定义的复选框样式和交互效果，旨在提高用户体验和视觉吸引力。 这个源码包可能包含了一个名为"grid_effect"的文件或文件夹，暗示它可能实现了一种网格...
做一个好看的checkbox
weixin_45679977的博客
05-16 310
废话啥啊，上代码吧 效果展示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200516205713297.gif#pic_center <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"
纯css3实现效果超级炫的checkbox复选框和radio单选框
01-19
之前为大家分享了好多css3实现的按钮。今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框，效果超级炫。先让我们看看图吧!   源码下载这个实例完全由css3实现的没有任何js代码。下面我们一起看下实现代码吧 html代码： 复制代码代码如下: <div xss=removed> <label> <input type=”checkbox” class=”option-input checkbox” checked=””> Checkbox </label> <label> <input type=”checkbox” cl
CheckBox各种炫酷效果.rar
07-09
CheckBox各种炫酷效果我们知道HTML默认的复选框样式十分简陋，而以图片代替复选框的美化方式会给页面表单的处理带来麻烦，那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化，并且带上超酷的滑动效果。
自定义checkbox和多列等高实践详解
Mosum的博客
03-14 596
自定义checkbox和多列等高布局的实践详解
html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
weixin_30607125的博客
06-03 1668
这是一款效果非常酷的CSS3复选框checkbox样式美化效果。该复选框美化效果共有11种。默认的复选框的样式十分不好看，该效果将复选框加一美化，带上了一些动画效果，其中一些制作为滑动按钮的样式。使用方法HTML结构该复选框美化效果的HTML结构如下：Check?当用户点击label的时候，实际上是点击了#checkbox-1。CSS样式通过label和checkbox，我们可以将checkbox...
复选框checkbox
weixin_33962621的博客
02-07 91
  复选框：checkboxhtml 结构 &lt;input type="checkbox" value="test" /&gt;测试 获取value值        function getValue() {            var str = "";            for (var i = 0; i &lt; list.length; i++) {       ...
Checkbox复选框
起名真难的博客
08-23 1485
1.判断类型为Null和空的方法 IsNullOrEmpty
checkBox复选框
jiawen2012的博客
09-10 343
// 初始化checkBox checkBox = (CheckBox) findViewById(R.id.checklanqiu); // 通过设置checkBox的监听事件,来判断checkbox是否被选中 checkBox.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public
复选框CheckBox
qq_63997064的博客
04-20 2493
基础控件-CheckBox
android复选框作为按钮,Android控件之CheckBox、RadioButton用法实例分析
weixin_39782832的博客
05-26 179
本文实例讲述了Android控件之CheckBox、RadioButton用法。分享给大家供大家参考。具体如下：CheckBox和RadioButton控件都只有选中和未选中状态，不同的是RadioButton是单选按钮，需要编制到一个RadioGroup中，同一时刻一个RadioGroup中只能有一个按钮处于选中状态。以下为CheckBox和RadioButton常用方法及说明以下为单选按钮和复...
纯CSS3打造超炫复选框与单选框
"这篇教程详细介绍了如何使用CSS3来创建超炫的checkbox复选框和radio单选框，提供了一段HTML和CSS3代码示例，帮助开发者实现无需JavaScript的纯CSS3效果。" 在Web开发中，CSS3是层叠样式表的最新版本，它引入了许多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值