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. 前端性能优化jQuery性能优化

    一.使用合适的选择器 $("#id"); 1.使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById ...

  2. 使用Git 本地代码提交到 GitHub

    第一步:下载Git 工具 在官网下载 https://git-scm.com/ 第二部:注册官方账号 创建一个村代码的仓库 注册地址https://github.com/ 第三部:本地代码 通过Git ...

  3. linux学习（一）认识、安装Linux

    一.什么是Linux linux是一种操作系统,我们用的android和ios就是分别是linux操作系统和类unix操作系统. linux也是我们经常说的服务器.我们看的网站,游戏,app背后都是服 ...

  4. 不怕你配置不对，就怕你看的资料不对！MIM 与 SharePoint 同步完全配置指南。

    为了更好的同步 User Profile,在 SharePoint 2010 中首次引入了 FIM (ForeFront Identity Manager) 用于编辑 User Profile 的同期 ...

  5. JavaScript sort() 方法详解

    定义和用法 sort() 方法用于对数组的元素进行排序. 语法 arrayObject.sort(sortby) 参数 描述 sortby 可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注 ...

  6. Python通过跳板机链接MySQL的一种方法

  7. Dapper-继续

    好久没有来博客园了,最近刚好有点时间晚上,继续完善之前的orm orm自己用的比较多的还是EF,linq写着真的是很方便,但是EF最让人头疼的地方还是每个表都需要建立mapping. 这个是相当的烦恼 ...

  8. 7. ZooKeeper的stat结构

    ZooKeeper命名空间中的每个znode都有一个与之关联的stat结构,类似于Unix/Linux文件系统中文件的stat结构. znode的stat结构中的字段显示如下,各自的含义如下: cZx ...

  9. Java实现归并排序和快速排序

    参考http://blog.csdn.net/morewindows/article/details/6684558和http://developer.51cto.com/art/201206/344 ...

  10. Unity3D获取资源的方法整理：

    在使用Unity3D做项目时,获取资源的方法大致分为两种.一种是通过写代码的方式,在程序运行时,自动获取资源:一种是通过手动拖拽的方式进行获取.不管是什么类型的资源都能通过这两种方式获得,下面拿图片资 ...