声明：文章为转载（略改动），点击查看原文。如有侵权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. Linux记录-TCP状态以及（TIME_WAIT/CLOSE_WAIT）分析（转载）

    1.TCP握手定理 2.TCP状态 l  CLOSED:初始状态,表示TCP连接是“关闭着的”或“未打开的”. l  LISTEN :表示服务器端的某个SOCKET处于监听状态,可以接受客户端的连接. ...

  2. Java编程思想 学习笔记8

    八.多态  在面向对象的程序设计语言中,多态是继数据抽象和继承之后的第三种基本特征. 多态通过分离做什么和怎么做,从另一角度将接口和实现分离开来. “封装”通过合并特征和行为来创建新的数据类型.“实现 ...

  3. GBK-----UTF-8编码格式问题浅析

    首先,想必大家在不同环境下切换写代码的时候,都会遇见乱码的时候(读取二进制的时候采用的编码和最初将字符转换成二进制时的编码不一致.),大多数人都知道,只需要把项目工程的编码格式调整一下为最初的编码就可 ...

  4. Javaweb学习笔记——（三）——————JavaScript基础&DOM基础

    day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...

  5. 闭包传递（floyed）

    题目链接: https://cn.vjudge.net/contest/66569#problem/H 题目大意: n代表母牛的个数,m代表给定的信息的组数.每一组数包括a,b. 代表b崇拜a(突然发 ...

  6. mysql 案例 ~ 分析执行完的大事务

    一 简介:今天咱们来聊聊如何定位以及执行完的大事务 二 目的:通过分析binlog脚本来定位执行的大事务 三 分析脚本 mysqlbinlog --base64-output=decode-rows ...

  7. 卷积神经网络(CNN)学习笔记1：基础入门

    卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01   |   In Machine Learning  |   9 Comments  |   14935  Vie ...

  8. [转]python 装饰器

    以前你有没有这样一段经历:很久之前你写过一个函数,现在你突然有了个想法就是你想看看,以前那个函数在你数据集上的运行时间是多少,这时候你可以修改之前代码为它加上计时的功能,但是这样的话是不是还要大体读读 ...

  9. 【转】scapy 构造以太网注入帧

    1. 描述 使用scapy进行以太网帧的注入,相对于RAW_SOCKET还是比较简单的.在讲述packet注入之前,先了解一下scapy伪造以太网帧的相关知识.下图为以太网帧格式和scapy对应的封装 ...

  10. SpringMvc整合Mybatis并使用声明式事务

    (1).引入相关依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid< ...