声明：文章为转载（略改动），点击查看原文。如有侵权24小时内删除，联系QQ：1522025433.

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

demo预览图（点击查看demo原地址）：

点击下载demo源码：地址一

　　　　　　　 备用下载

通常我们使用以下html结构，我们给复选框定义id#checkbox_a1，然后使用label的for属性与之关联，这样的话，用户点击label的时候，实际上就相当于点击了#checkbox_a1。

<input type="checkbox" id="checkbox_a1" class="chk_1" />

<label for="checkbox_a1">check</label>

通过label和checkbox，我们可以将checkbox隐藏，而将label制作为各种漂亮超酷的复选框样式。我们可以使用:before和:after伪元素来制作各种效果，如滑动按钮的效果。这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实现，下面是一个简单的例子：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>使用css3美化复选框</title>

<style type="text/css">

/*    定义被选中之后的label样式*/

    .chk-a1 + label {

        position: relative; /*成为子元素的定位包含框，即里面的勾选符号 √ */

        display: inline-block;/*定义成行内块元素，方便使用盒子模型的一些属性*/

        padding: 9px;

        background-color: #fff;

        border: 1px solid #c1caca;

        border-radius: 5px;/*实现圆角*/

        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), /*定义盒子外阴影*/

                    inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05);/*定义盒子内阴影，用法详见css3查考手册*/

        /*cursor: pointer; 鼠标经过为手型  根据需要添加*/

    }

/*    定义鼠标点击时label的样式*/

     .chk-a1 + label:active {

        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),

                    inset 0 1px 3px rgba(0, 0, 0, 0.1);

/*        因为通过box-shadow属性定义鼠标点击时阴影的 变化，从而达到了 按钮 般的效果*/

    }

/*    定义被选中之后的label样式*/

    .chk-a1:checked + label {

        background-color: #ecf2f7;

        border: 1px solid #92a1ac;

/*        定义多重阴影（美化）*/

        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),

                    inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05),

                    inset 0 -15px 10px -12px rgba(255, 255, 255, 0.1);

        color: #243441;/* 定义内部 字体颜色，在这主要是定义内部勾选 √ 符号的颜色*/

    }

/*    利用伪对象选中器为 被选中之后的label 内添加勾选  √ 符号*/

    .chk-a1:checked + label:after {

        content: '\2714'; /*\2714 为转义字符，代表  勾选  √ 符号*/

        display: inline-block;

        position: absolute;/*进行绝对定位*/

        top: 0;

        left: 0;

        width: 100%;/*使宽度等于父元素的宽度，方便水平居中*/

        margin-top: -7px;/*利用外边界取负值 调整到垂直居中*/

        font-size: 1.4em;/*字体大小，即 √ 对号的大小*/

        color: #243441;

        text-align: center;/*水平居中*/

        vertical-align: text-top;

    }

</style>

</head>

<body>

<form action="123.php" method="get">

    <p>使用css3美化复选框 </p>

    <input type="checkbox" id="checkbox-a1" class="chk-a1" value="0" checked /> <label for="checkbox-a1"></label>

    <!--设计思路--利用label做复选框，然后把真正的复选框 设置成 display: none; 隐藏掉即可 -->

    <br />

    <input type="checkbox" id="checkbox-a2" class="chk-a1" value="1" /> <label for="checkbox-a2"></label>

</form>

</body>

</html>

此实例效果图：

最后别忘了把，默认的复选框隐藏掉。即添加如下样式：

方法一：

/*    隐藏掉原来的复选框*/

    .chk-a1 {

        display: none;

    }

方法一的效果：

方法二：

/*    方法二：定义原来的复选框为不可见*/

    .chk-a1 {

        visibility: hidden;

    }

方法二的效果：

方法一直接不显示在文档流中，隐藏掉后不占据原来位置，

方法二是定义原复选框为不可见状态，隐藏掉仍占据原来位置！

根据情况，选择使用。

浏览页面效果，当点击label的时候，复选框出现勾选符号，表示选中状态，再次点击时，勾选符号消失，表示取消选中状态。

DEMO中，我们提供了4个示例，基本可以满足页面常见的复选框样式需求，有需要的可以直接下载源代码，复制css样式即可。你也可以根据项目需求对css样式进行适当修改。

补充说明

复选框的美化效果可以在IE9+浏览器中支持，那么ie8及以下浏览器需要恢复默认样式，使用以下代码：

<!--[if lte IE 8]>

<link href="ie8.css" rel="stylesheet" />

<![endif]-->

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

  1. css3美化复选框checkbox

     两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...

  2. 使用CSS3美化复选框checkbox

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

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

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

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

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

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

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

  6. 纯css3实现美化复选框和手风琴效果（详细）

    关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用bef ...

  7. 纯css美化复选框，单选框，滑动条（range）

    <div class="box"> <!-- 借鉴地址:http://www.cnblogs.com/xiaoxianweb/p/5465607.html --& ...

  8. 10个HTML5美化版复选框和单选框

    单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...

  9. radio(单选框)/checkbox(复选框) 美化

    由于某种原因,可能需要对单选框(radio)或复选框(checkbox)进行美化,那么直接修改样式是行不通,要实现就需要添加js,以下js依赖于jquery radio.js: function ra ...

随机推荐

  1. 函数和常用模块【day04】：函数的非固定参数（三）

    本节内容 1.概述 2.默认参数 3.参数组 4.总结 一.概述 在上一篇博客中我已经写了,位置参数和关键字参数,下面我们来谈谈默认参数和参数组 二.默认参数 默认参数指的是,我们在传参之前,先给参数 ...

  2. HTML5视频播放插件Video.js使用详解

    一.Video.js简介 Video.js 是一个开源的 Html5 jquery 视频插件,这个插件可以用来处理 Flash 视频,它还是一个多平台支持的产品. Moreover,YouTube,V ...

  3. 跨越VLAN

    跨越VLAN VLAN(Virtual Local Area Network),是基于以太网交互技术构建的虚拟网络,既可以将同一物理网络划分为多个VLAN,也可以跨越物理网络障碍,将不同于子网中的用户 ...

  4. 第18月第22天 机器学习first

    1.网易公开课 机器学习   http://open.163.com/special/opencourse/machinelearning.html https://github.com/search ...

  5. 第16月第12天 CABasicAnimation 旋转加速

    1. ; double duration = 10.0f; ; i<count; i++) { //旋转动画 CABasicAnimation *anima3 = [CABasicAnimati ...

  6. 课程4：黑马程序员_spring2.5视频教程--视频列表

    \黑马程序员_spring2.5视频教程\01Struts相关基础理论介绍.mp4; \黑马程序员_spring2.5视频教程\02搭建struts开发环境.mp4; \黑马程序员_spring2.5 ...

  7. Attempting to badge the application icon but haven't received permission from the user to badge the application错误解决办法

    今天刚刚学习UIApplication对象,当我希望利用这个对象在我们的应用图标上显示个数字的时候,xcode报了这个错误:  解决办法 : - (IBAction)applicationClicke ...

  8. 2017-2018-2 20155303『网络对抗技术』Final：Web渗透获取WebShell权限

    2017-2018-2 『网络对抗技术』Final:Web渗透获取WebShell权限 --------CONTENTS-------- 一.Webshell原理 1.什么是WebShell 2.We ...

  9. Docker容器数据卷

    ⒈Docker容器中数据如何持久化? ①通过commit命令使容器反向为镜像 ②以容器数据卷的方式将数据抽离 ⒉容器数据卷的作用? ①容器数据的持久化 ②容器间继承.共享数据 ⒊能干嘛? 卷就是目录或 ...

  10. Linux 文件系统扩展属性【转】

    转自:https://blog.csdn.net/ganggexiongqi/article/details/7661024 扩展属性(xattrs)提供了一个机制用来将<键/值>对永久地 ...