文档章节

好看的checkbox样式

范小菜
 范小菜
发布于 2016/10/09 09:14
字数 838
阅读 222
收藏 0

如图所示:

总结下来知道两点就可以了1.<input>标签设置visibility: hidden属性。2.label设置for属性对应相应的input标签,label的css样式设置成自己需求的出发按钮样式。

<div class="content">
     	<section class="checkbox-item">
     		<div class="checkone">
     			<input type="checkbox" id="checkone"/>
     			<label for="checkone"></label>
     		</div>
     	</section>
     	<section class="checkbox-item">
     		<div class="checktwo">
     			<input type="checkbox" id="checktwo"/>
     			<label for="checktwo"></label>
     		</div>
     	</section>
     	<section class="checkbox-item">
     		<div class="checkthree">
     			<input type="checkbox" id="checkthree"/>
     			<label for="checkthree"></label>
     		</div>
     	</section>
     	<section class="checkbox-item">
     		<div class="checkfour">
     			<input type="checkbox" id="checkfour"/>
     			<label for="checkfour"></label>
     		</div>
     	</section>
     </div>
.content{
       		margin: 20px auto;
       		width:800px;
       }
       .checkbox-item{
       	display: inline-block;
       	margin:0 20px;
       	border: 1px solid #ccc;
       	width:100px;
       	height:100px;
       	text-align: center;
       }
        /*样式1*/
       .checkone{
       	  position:relative;
          width:80px;
          height:30px;
          margin:35px auto;
          background: #333;
          border-radius:15px; 
          -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);
       }
       .checkone:after{
       	 content: "";
       	 position: absolute;
       	 left:14px;
       	 top:14px;
       	 height: 2px;
    	 width: 52px;
   		 background: #111;
   		 border-radius: 50%;
   		 -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);
       }
       .checkone input[type="checkbox"]{
       		visibility:hidden; 
       }
       .checkone label{
       	 position: absolute;
       	 width:20px;
       	 height:20px;
       	 background: #f1f1f1;
       	 border-radius:50%;
       	 left:5px;
       	 top:5px;
       	 cursor: pointer;
       	 z-index: 1;
       	 transition: all 0.3s ease;
       }
       .checkone label:after{
       	 content: "";
       	 position: absolute;
       	 width:10px;
       	 height:10px;
       	 background: #333;
       	 border-radius: 50%;
       	 left:5px;
       	 top:5px;
       	  -moz-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
  box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
       }
       #checkone:checked + label{
       	 left:55px;
       }
       #checkone:checked + label:after{
       	background: #00bf00;
       }
       /*样式二*/
       .checktwo{
       	  position:relative;
          width:80px;
          height:26px;
          margin:37px auto;
          background: #333;
          border-radius:13px; 
          -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);
       }
       .checktwo input[type="checkbox"]{
       		visibility:hidden; 
       }
       .checktwo label{
          position: absolute;
          width:36px;
          height:20px;
          background: #f1f1f1;
          border-radius: 10px;
          left:2px;
          top:3px;
          cursor: pointer;
          transition: all 0.3s ease;
          z-index:1;
       }
       .checktwo:before{
          content: "ON";
          position: absolute;
          top:0px;
          left:5px;
          color:#00bf00;
          line-height: 26px;
       }
       .checktwo:after{
          content: "OFF";
          position: absolute;
          top:0px;
          right:5px;
          color:#000;
          line-height: 26px;
          text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
       }
       #checktwo:checked+label{
       	 left:42px;

       }
		/*样式3*/
		.checkthree{
			position: relative;
			width:30px;
			height:30px;
            margin:35px auto;
            background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  -moz-border-radius: 50px;
            border-radius:50%;
             box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
		}
		.checkthree input[type="checkbox"]{
			visibility: hidden;
		}
		.checkthree label{
			height:24px;
			width:24px;
			position: absolute;
			top:3px;
			left:3px;
			border-radius: 50%;
			box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
			background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
			cursor: pointer;
		}
		.checkthree label:after{
			content: "";
			position: absolute;
			width:22px;
			height:22px;
			top:1px;
			left:1px;
		    background: linear-gradient(to bottom, #00bf00 0%, #009400 100%);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
			opacity: 0;
			border-radius:50%;
			box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);

		}
		#checkthree:checked+label:after{
			opacity: 1;
		}
		/*样式4*/
		.checkfour{
			position: relative;
			width:30px;
			height:30px;
            margin:35px auto;
            background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  -moz-border-radius: 50px;
            border-radius:50%;
            box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
		}
		.checkfour input[type="checkbox"]{
			visibility: hidden;
		}
		.checkfour label{
			height:24px;
			width:24px;
			position: absolute;
			top:3px;
			left:3px;
			border-radius: 50%;
			box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
			background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
			cursor: pointer;
			overflow: hidden;
		}
		.checkfour label:after{
			content: "";
			position: absolute;
			width:9px;
			height:5px;
			top:7px;
			left:6px;
			opacity: 0;
			border: 3px solid #fcfff4;
   			border-top: none;
    		border-right: none;
			transform: rotate(-45deg);

		}
		
		#checkfour:checked+label:after{
			opacity: 1;
		}

 

© 著作权归作者所有

范小菜
粉丝 1
博文 14
码字总数 6697
作品 0
松江
私信 提问
用户自定义多选框checkbox

在实际项目开发中,浏览器自带的checkbox样式以及选择项是远远无法满足需求的,在实际项目中,需求往往可能是这样:被设计好样式的checkbox以及多选项只能保持两个或其他不超过某个固定数。那...

会写代码的husky
2016/12/13
87
0
NSButton常用详解(修改背景色,添加背景图片)

Maybe 你和我一样,刚转入MAC开发,并且需要使用NSButton做一些操作,正常来讲系统的NSButton满足不了我们的需求,所有我这里就把自己遇到的问题及解决方式记录下来,或许能帮到你。 0、NSB...

topws1
2017/11/09
0
0
CSS3和jQuery实现的自定义美化Checkbox...

是不是比默认的好看多了,个人的审美观应该还是可以的。 当然我们可以在这里查看DEMO演示。 接下来我们一起来看看实现这款美化版Checkbox的源代码。主要思路是利用隐藏原来的checkbox和radio...

我输过但从未怕过
2016/05/11
55
0
如何使用CSS3与jQuery创建登录表单[教程](翻译)

完成效果图: 在此教程中,我们将编写登录表单,此过程中你会找到Vladimir Kudinov的Futurico UI Pro.创建此表单将用到CSS3与jQuery。 Step 1 - HTML标签 让我们先开始穿件HTML标签,创建一个...

彭博
2012/03/23
693
0
ExtJS带复选框的下拉树对复选框中半选状态的实现

Extjs基本组件:带复选框的下拉树 首先,我们对于ExtJs实现的带复选框的下拉树应该有一个简单的了解,从下面的例子中可以看出,treepanel是通过节点中checked的值(true,false)来实现复选框...

海礁
2016/10/28
547
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
6
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
17
0
浅谈java过滤器Filter

一、简介 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码、做一些业务逻辑判断如是否有权限访问页面等。其工作原理是,只要你在web.xml...

青衣霓裳
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部