W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式

一, 单选按钮

<html>

<head>

    <style type="text/css">

        .switch {

            margin: 20px 20px 0 0;

            display: flex;

            align-items: center;

            width: auto;

        }

        .checkbox-input {

            display: none

        }

        .checkbox {

            -webkit-transition: background-color 0.3s;

            transition: background-color 0.3s;

            background-color: #fff;

            border: 1px solid #d7d7d7;

            border-radius: 3px;

            width: 16px;

            height: 16px;

            vertical-align:middle;

            margin: 0 5px;

        }

        .checkbox-input:checked+.checkbox {

            background-color: #57ad68;

        }

        .checkbox-input:checked+.checkbox:after {

            content: "\2714";

            display: inline-block;

            height: 100%;

            width: 100%;

            color: #fff;

            text-align: center;

            line-height: 16px;

            font-size: 12px;

            box-shadow: 0 0 4px #57ad68;

        }

    </style>

</head>

<body>

    <label class="switch">

        <input class="checkbox-input" id="checkbox" type="checkbox" name="demo-checkbox1">

        <label class="checkbox" for="checkbox"></label>

        <span>Hello</span>

    </label>

</body>

</html>

利用的就是label和CSS3的选中状态checked来修改样式, 中间的那个小✔️是一个unicode编码的字符, 如果需要更改参考http://blog.csdn.net/wy_97/article/details/77749405

二, 复选按钮

<html>

<head>

    <style type="text/css">

        .switch {

            display: flex;

            align-items: center;

            width: auto;

            float: left;

        }

        .radio-beauty-container .radio-beauty {

            width: 16px;

            height: 16px;

            box-sizing: border-box;

            display: inline-block;

            border: 1px solid #d7d7d7;

            margin: 0 5px;

            border-radius: 50%;

            transition: 0.2s;

        }

        .radio-beauty-container input[type="radio"]:checked+.radio-beauty {

            border: solid 1px green;

            padding: 3px;

            background-color: green;

            background-clip: content-box;

            box-shadow: inset 0 0 1px rgba(0,128,0, 0.2), 0 0 3px green;

        }

    </style>

</head>

<body>

    <div class="radio-beauty-container">

        <label class="switch">

            <span class="radio-name">radio2</span>

            <input type="radio" name="radioName" id="radioName2" hidden/>

            <label for="radioName2" class="radio-beauty"></label>

        </label>

        <label class="switch">

            <span class="radio-name">radio3</span>

            <input type="radio" name="radioName" id="radioName3" hidden/>

            <label for="radioName3" class="radio-beauty"></label>

        </label>

    </div>

</body>

</html>

和单选按钮的思路一样都是利用选中状态来进行判断

三, 实现滑动按钮

<html>

<head>

    <style type="text/css">

        .switch-slide-label {

            display: block;

            width: 34px;

            height: 18px;

            background: #ccc;

            border-radius: 30px;

            cursor: pointer;

            position: relative;

            -webkit-transition: 0.3s ease;

            transition: 0.3s ease;

        }

        .switch-slide-label:after {

            content: '';

            display: block;

            width: 16px;

            height: 16px;

            border-radius: 100%;

            background: #fff;

            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);

            position: absolute;

            left: 1px;

            top: 1px;

            -webkit-transform: translateZ(0);

            transform: translateZ(0);

            -webkit-transition:0.3s ease;

            transition:0.3s ease;

        }

        .switch-slide input:checked+label {

            background: #34bf49;

            transition: 0.3s ease;

        }

        .switch-slide input:checked+label:after {

            left: 17px;

        }

    </style>

</head>

<body>

    <div class="radio-beauty-container">

        <label class="switch-slide">

            <input type="checkbox" id="menu-right" hidden>

            <label for="menu-right" class="switch-slide-label"></label>

        </label>

    </div>

</body>

</html>

利用纯CSS美化checkbox和radio和滑动按钮的实现的更多相关文章

  1. 用纯CSS美化radio和checkbox

    Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...

  2. 纯css实现checkbox开关切换按钮

    我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...

  3. input美化 checkbox和radio样式

    input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...

  4. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

  5. 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端

    最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...

  6. Css实现checkbox及radio样式自定义

    前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

  7. css美化checkbox的样式

    使用iCheck插件可以改变checkbox.radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的c ...

  8. 纯CSS美化的checkbox 和 radio

    html <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现自定义美化复选框和单选框</title> ...

  9. 原创：纯CSS美化单复选框（checkbox、radio）

    最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...

随机推荐

  1. HTML5网站大观：15个精美的 HTML5 单页网站作品欣赏

    HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强.效果出众的Web应用和游戏.今天,本文收集了15个精美的 HTML5 单页网站作品,让大家感受一下 HTML5 ...

  2. 使用SQL Server2014作业定时执行无参的存储过程

    一.存储过程 1.新建存储过程 按照下图找到存储过程,右键“新建”选择”存储过程” 此时在右侧会打开一个窗口,如下图. 2.填写创建存储过程语句 填写存储过程名称,因为是无参的存储过程,所以把参数部分 ...

  3. Tinyhttpd阅读笔记

    1.简介 tinyhttpd是一个开源的超轻量型Http Server,阅读其源码,可以对http协议,微型服务器有进一步的了解. 源码链接: 参考博客:tinyhttpd源码分析 2.笔记 ---- ...

  4. poj 2459 Sumsets

    Sumsets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11612   Accepted: 3189 Descript ...

  5. HDU 3584 Cube（三位树状数组）

    Cube Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total Submi ...

  6. 理解Java包

    本质上,包是一个唯一命名的类的集合,将类集合到包里面的主要原因,是为了当在应用程序中使用预先编写的类时避免与类自身可能引起的明明冲突.用于包中的类名不会妨碍另一个包或程序中的类名,因为此时,包中的类名 ...

  7. hadoop2 YARN/Mv2中 ApplicationMaster相关问题及介绍

    ApplicationMaster是什么? ApplicationMaster是一个框架特殊的库,对于Map-Reduce计算模型而言有它自己的ApplicationMaster实现,对于其他的想要运 ...

  8. addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】

    yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...

  9. Dijkstra算法（Swift版）

    原理 我们知道,使用Breadth-first search算法能够找到到达某个目标的最短路径,但这个算法没考虑weight,因此我们再为每个edge添加了权重后,我们就需要使用Dijkstra算法来 ...

  10. P1879 [USACO06NOV]玉米田Corn Fields

    题目描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; 1 ≤ N ...