两种美化效果如下图:

代码(html)

 <div id="main">
<h2 class="top_title">使用CSS3美化复选框checkbox</h2>
<div class="demo">
<div class="wrap">
<p>1. 勾选</p>
<input type="checkbox" id="checkbox_a1" class="chk_1" checked />
<label for="checkbox_a1"></label>
<input type="checkbox" id="checkbox_a2" class="chk_1" />
<label for="checkbox_a2"></label>
</div>
<div class="wrap">
<p>2. 移动端开关</p>
<input type="checkbox" id="checkbox_b1" class="chk_2" checked />
<label for="checkbox_b1"></label>
</div>
</div>
</div>

代码(css)

 .demo{width:560px;margin:30px auto 10px auto}
.wrap{margin:30px 0}
.wrap p{padding:10px 0}
.chk_1,.chk_2{display:none;}
.top_title{text-align:center;} /*css3选择器:E+F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F*/ /*******STYLE 1*******/
.chk_1 + label {
background-color:#FFF;
border:1px solid #C1CACA;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding:9px;
border-radius:5px;
display:inline-block;
position:relative;
margin-right:30px;
}
.chk_1 + label:active {
box-shadow:0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.chk_1:checked + label {
background-color:#ECF2F7;
border:1px solid #92A1AC;
color:#243441;
}
.chk_1:checked + label:after {
content:'\2714';
position:absolute;top:-8px;left:0px;
color:#758794;
width:100%;
text-align:center;
font-size:20px;
padding:1px 0 0 0;
vertical-align:text-top;
} /*******STYLE 2*******/
.chk_2 + label {
width:40px;height:15px;background:#ddd;
padding:9px;
border-radius:20px;
display:inline-block;
position:relative;
}
.chk_2 + label:before {
content:' ';
width:31px;height:31px;background:#fff;
position:absolute;top:1px;left:1px;
z-index:;
border-radius:100px;
box-shadow:0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3);
transition:all 0.1s ease-in;
-webkit-transition:all 0.1s ease-in;
}
.chk_2 + label:after {
content:' ';
position:absolute;top:;left:;
width:100%;height:100%;
border-radius:50px;
box-shadow:inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4);
transition:all 0.1s ease-in;
-webkit-transition:all 0.1s ease-in;
}
.chk_2:checked + label:before {
left:26px;
}
.chk_2:checked + label:after {
background:#4cda60;
box-shadow:0 0 1px #4cda60;
}

css3美化复选框checkbox的更多相关文章

  1. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

  2. 基于CSS3自定义美化复选框Checkbox组合

    今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点.有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化check ...

  3. 使用css3美化复选框

    声明:文章为转载(略改动),点击查看原文.如有侵权24小时内删除,联系QQ:1522025433. 我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那 ...

  4. 8个非常个性化的CSS3单/复选框

    单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery ...

  5. [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  6. 纯CSS3来自定义单选框radio与复选框checkbox

    单选框(radio)自定义样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  7. CSS 美化复选框 - 无图片方式

    今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> < ...

  8. 复选框(checkbox)、单选框(radiobox)的使用

    复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...

  9. php 判断复选框checkbox是否被选中

    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...

随机推荐

  1. flex align-content中的描述的“多根轴线的对齐方式”中的“多根轴线”到底是什么

    flex 有两条轴线,根据flex-flow 设置的来判断的,水平为主轴的话,那么值为row,垂直为主轴的话那么为column: 其中设置align-items 和 align-content都是来设 ...

  2. haproxy 新手上路

    apache.nginx之类的反向代理(转发)功能,通常只能用于http协议,其它协议就不好使了(注:nginx据说商业版的,支持tcp协议了). haproxy可以弥补这方面的不足,haproxy支 ...

  3. strtol 函数用法

    strtol是一个C语言函数,作用就是将一个字符串转换为长整型long,其函数原型为: long int strtol (const char* str, char** endptr, int bas ...

  4. Windows phone应用开发[19]-RSA数据加密

    在这个系列的第十六章节中Windows phone应用开发[16]-数据加密 中曾详细讲解过windows phone 常用的MD5,HMAC_MD5,DES,TripleDES[3DES] 数据加密 ...

  5. java-工具类-读取配置文件

    java读取配置文件,当发现文件被修改后则重新加载 package com.zg.config; import java.io.File; import java.io.FileInputStream ...

  6. 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)

    using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

  7. Python3 基本数据类型

    Python中的变量不需要声明,每个变量使用前必须赋值,变量赋值后才会被创建,在Python中变量就是变量,它没有类型.我们所说的"类型"是变量所指的内存中对象的类型. 等号(=) ...

  8. Linux 常用操作命令

    基本操作 显示 查看 查找 定时任务 打包压缩 grep sed awk 正则

  9. 文本框 textarea 动态显示行数(简单文本编辑器)

    工作需求做一个文本编辑器简单的. 右边输入文字,左边会显示相应的代码行.清空也会变为1. 废话不多说上代码,自己理解. <style type="text/css"> ...

  10. Codeforces Round #377 (Div. 2) B. Cormen — The Best Friend Of a Man(贪心)

     传送门 Description Recently a dog was bought for Polycarp. The dog's name is Cormen. Now Polycarp has ...