纯CSS3漂亮的checkbox和radio美化效果

来源:https://www.sucaihuo.com/js/2775.html 2017-08-18 23:44浏览(6665) 收藏

一款纯CSS3漂亮的checkbox和radio美化效果,有30多种丰富的样式可供选择,有带图标的、带点击动画的、点击文字变化的等等,整体样式效果都非常的酷炫。
纯CSS3漂亮的checkbox和radio美化效果
分类:表单代码 > 复选框 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入图标字体库和多个样式文件,代码如下:

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link async rel="stylesheet" href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css"/>
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/>
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css"/>
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/>
<link  href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="src/pretty.min.css">

页面的body部分,重复使用了多个div、input、label等标签,部分代码如:

<h3>BOOTSTRAP GLYPHICONS</h3>
	<div class="pretty success smooth">
	  <input type="checkbox"> 
	  <label><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</label>
	</div>
	<div class="pretty circle plain o-danger smooth">
	  <input type="checkbox"> 
	  <label><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</label>
	</div>
	<div class="pretty plain smooth toggle">
	  <input type="checkbox"> 
	  <label><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</label>
	  <label><i class="glyphicon glyphicon-heart info"></i> glyphicon-heart</label>
	</div>
	<h3>MATERIAL DESIGN ICONS (MDI)</h3>
	<div class="pretty success smooth">
	  <input type="checkbox"> 
	  <label><i class="mdi mdi-check"></i> mdi-check</label>
	</div>
	<div class="pretty circle plain o-danger smooth">
	  <input type="checkbox"> 
	  <label><i class="mdi mdi-close"></i> mdi-close</label>
	</div>
	<div class="pretty plain smooth toggle">
	  <input type="checkbox"> 
	  <label><i class="mdi mdi-heart-outline"></i> mdi-heart-outline</label>
	  <label><i class="mdi mdi-heart info"></i> mdi-heart</label>
	</div>
	<h3>MATERIAL DESIGN ICONS (ZMDI)</h3>
	<div class="pretty success smooth">
	  <input type="checkbox"> 
	  <label><i class="zmdi zmdi-check"></i> zmdi-check</label>
	</div>
	<div class="pretty circle plain o-danger smooth">
	  <input type="checkbox"> 
	  <label><i class="zmdi zmdi-close"></i> zmdi-close</label>
	</div>
	<div class="pretty plain smooth toggle">
	  <input type="checkbox"> 
	  <label><i class="zmdi zmdi-favorite-outline"></i> zmdi-favorite-outline</label>
	  <label><i class="zmdi zmdi-favorite info"></i> zmdi-favorite</label>
	</div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2