借鉴网友博客, 改用后整理收录

效果图:

移入:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box_inner1{

                width: 25px;

                margin: 20px 100px;        /*最外层盒子的外边距, 可自己调*/

                position: relative;

            }

            .box_inner1 label{

                cursor: pointer;

                position: absolute;

                width: 25px;        /*此处width和height是选框显示出来的大小*/

                height: 25px;

                top:0;                /*此处top和left是选框显示出来位置, 可根据需求进行调节*/

                left: 0;

                background: #e75213;        /*此处是复选框背景颜色, 下面是边框颜色, 设置一致是保持统一*/

                border: 1px solid #E75213;

            }

            .box_inner1 label:after{

                opacity: 1;        /*选中后样式的透明度, 1是不透明*/

                content: '';    /*选中后的内容 ,此处为空是指把默认的去掉, 下面自定义*/

                position: absolute;

                width: 9px;

                height: 5px;

                background: transparent;    /*这一块是核心,可以自己调试看效果*/

                top: 6px;

                left: 7px;

                border: 3px solid white;

                border-top: none;

                border-right: none;

                /*选中的样式是用盒子div加背景色, 加旋转实现的, 下面的代码是旋转45度*/

                -webkit-transform: rotate(-45deg);

                -moz-transform: rotate(-45deg);

                /*-o-transform: rotate(-45deg);*/

                -ms-transform: rotate(-45deg);

                transform: rotate(-45deg);

            }

            .box_inner1 label:hover::after{

                opacity: 0.5;        /*鼠标移入移出的透明度*/

            }

            .box_inner1 input[type=checkbox]:checked + label:after{

                opacity: 0;        /*取消选中*/

            }

            /*要有多个选框, 直接复制一份重命名, 避免冲突*/

            /*第二个*/

            .box_inner2{

                width: 25px;

                margin: 20px 100px;

                position: relative;

            }

            .box_inner2 label{

                cursor: pointer;

                position: absolute;

                width: 25px;

                height: 25px;

                top:0;

                left: 0;

                background: #e75213;

                border: 1px solid #E75213;

            }

            .box_inner2 label:after{

                opacity: 1;

                content: '';

                position: absolute;

                width: 9px;

                height: 5px;

                background: transparent;

                top: 6px;

                left: 7px;

                border: 3px solid white;

                border-top: none;

                border-right: none;

                -webkit-transform: rotate(-45deg);

                -moz-transform: rotate(-45deg);

                /*-o-transform: rotate(-45deg);*/

                -ms-transform: rotate(-45deg);

                transform: rotate(-45deg);

            }

            .box_inner2 label:hover::after{

                opacity: 0.5;

            }

            .box_inner2 input[type=checkbox]:checked + label:after{

                opacity: 0;

            }

            input[type=checkbox]{

                visibility: hidden;

            }

        </style>

    </head>

    <body>

        <div class="box_inner1">

            <input type="checkbox" id="box_innerInput1" />

            <label for="box_innerInput1"></label>

        </div>

        <div class="box_inner2">

            <input type="checkbox" id="box_innerInput2" />

            <label for="box_innerInput2"></label>

        </div>

    </body>

</html>

参考:

http://www.360doc.com/content/15/0528/11/1355383_473823407.shtml

https://blog.csdn.net/qq_34182808/article/details/79992465

纯CSS修改checkbox复选框样式的更多相关文章

  1. 纯CSS修改checkbox复选框样式-02

    我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好), 这个是改动最简单的: css代码 input[type=checkbox]{ visibility: hidden; } i ...

  2. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  3. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  4. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  5. ZH奶酪：纯CSS自定义Html中Checkbox复选框样式

    原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...

  6. checkbox复选框样式

    随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...

  7. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

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

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

  9. css 设置 checkbox复选框控件的对勾√样式

      效果 最终的样式,想要的效果:   我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...

随机推荐

  1. Data Center手册(1):架构

    如图是数据中心的一个基本架构 最上层是Internet Edge,也叫Edge Router,也叫Border Router,它提供数据中心与Internet的连接. 连接多个网络供应商来提供冗余可靠 ...

  2. 多个router和多个network

    一般搭建成功了opentack后,都会按照文档的这样创建网络 Scenario 1: one tenant, two networks, one router Scenario 2: two tena ...

  3. [Swift]LeetCode145. 二叉树的后序遍历 | Binary Tree Postorder Traversal

    Given a binary tree, return the postorder traversal of its nodes' values. Example: Input: [1,null,2, ...

  4. [Swift]LeetCode913.猫与老鼠 | Cat and Mouse

    A game on an undirected graph is played by two players, Mouse and Cat, who alternate turns. The grap ...

  5. [Swift]LeetCode1000. 合并石头的最低成本 | Minimum Cost to Merge Stones

    There are N piles of stones arranged in a row.  The i-th pile has stones[i] stones. A move consists ...

  6. [Swift]LeetCode1003. 检查替换后的词是否有效 | Check If Word Is Valid After Substitutions

    We are given that the string "abc" is valid. From any valid string V, we may split V into ...

  7. 动手实现一个 LRU cache

    前言 LRU 是 Least Recently Used 的简写,字面意思则是最近最少使用. 通常用于缓存的淘汰策略实现,由于缓存的内存非常宝贵,所以需要根据某种规则来剔除数据保证内存不被撑满. 如常 ...

  8. Openssh版本升级修复漏洞

    一.由于openssh版本过低当用扫描软件检测时会出现以下漏洞: 二.解决方案是升级高版本,下面是升级的步凑. 1.安装telnet工具,因为升级过程中怕失败或者重启ssh失败.我们直接yun安装即可 ...

  9. Android--操作图片Exif信息

    前言 在Android系统中,图片文件在内存中以像素点的二维数组加载,存放像素信息,还会在开头加上一些额外的照片拍摄参数信息,这些信息就是Exif.Android2.0之后,媒体库加入了操作图片Exi ...

  10. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->新增记录SQL执行过程

    有时我们需要记录整个系统运行的SQL以作分析,特别是在上线前这对我们做内部测试也非常有帮助,当然记录SQL的方法有很多,也可以使用三方的组件.3.2版本我们在框架底层新增了记录框架运行的所有SQl过程 ...