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

效果图:

移入:

<!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. 电子科技大学实验中学PK赛（三）-期末测试比赛题解

    比赛地址:http://qscoj.cn/contest/33/ A题 国家德比 分析:用b,d,B,D记录两场比赛两支球队的比分,先判断b+B与d+D的大小,如果先者大则拜仁胜,后者大则多特胜:相同 ...

  2. C++或C#调用外部exe的分析

    假如有个外部程序名为A.exe,放在目录E:\temp\下,然后我们用C++或者C#写一个程序调用这个A.exe的话(假设这个调用者所在的路径在D:\invoke),通常会采用下面的代码: // C# ...

  3. request,reponse对象中的方法

    1.request对象 客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.它是HttpServletRequest类的实例. 序号 方 法 说 明 1   obj ...

  4. [Swift]LeetCode135. 分发糖果 | Candy

    There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...

  5. [Swift]LeetCode159.具有最多两个不同字符的最长子串 $ Longest Substring with At Most Two Distinct Characters

    Given a string S, find the length of the longest substring T that contains at most two distinct char ...

  6. Python——day12 nonlcoal关键字、装饰器（开放封闭原则、函数被装饰、最终写法）

    一.nonlocal关键字 1.作用:将L与E(E中的名字需要提前定义)的名字统一 2.应用场景:如果想在被嵌套的函数中修改外部函数变量(名字)的值 def outer(): num=10 print ...

  7. 如何看待Google欲回归中国事件

    最近一条新闻刷爆了朋友圈: 8 月 6 日,<人民日报>在它位于 Facebook.Twitter 社交媒体平台的官方账号上发布了一篇标题为<Stability prerequisi ...

  8. JVM基础系列第7讲：JVM 类加载机制

    当 Java 虚拟机将 Java 源码编译为字节码之后,虚拟机便可以将字节码读取进内存,从而进行解析.运行等整个过程,这个过程我们叫:Java 虚拟机的类加载机制.JVM 虚拟机执行 class 字节 ...

  9. .NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程

    写在前面 这篇我们对用户权限进行极简设计并保留其扩展性.首先很感谢大家的阅读,前面六章我带着大家快速入门了ASP.NET Core.ASP.NET Core的启动过程源码解析及配置文件的加载过程源码解 ...

  10. 2016年，总结篇 续 如何从 JQ 转到 VueJS 开发（一）

    接着 2016 年的总结,我们来看看 2016年 国内最火且没有之一的前端MVVM 框架 VueJs 虽然 到写文章的这个时间点,VueJs已经发布了 2.1.x 了, 但是对于很多 Vuejs 的初 ...