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

效果图:

移入:

<!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. 【安富莱专题教程第7期】终极调试组件Event Recorder，各种Link通吃，支持时间和功耗测量，printf打印，RTX5及中间件调试

    说明:1.继前面的专题教程推出SEGGER的RTT,JScope,Micrium的uC/Probe之后,再出一期终极调试方案Event Recoder,之所以叫终极解决方案,是因为所有Link通吃.  ...

  2. Java 延迟队列使用

    延时队列,第一他是个队列,所以具有对列功能第二就是延时,这就是延时对列,功能也就是将任务放在该延时对列中,只有到了延时时刻才能从该延时对列中获取任务否则获取不到…… 应用场景比较多,比如延时1分钟发短 ...

  3. Android OpenGL ES 开发（五）: OpenGL ES 使用投影和相机视图

    OpenGL ES环境允许你以更接近于你眼睛看到的物理对象的方式来显示你绘制的对象.物理查看的模拟是通过对你所绘制的对象的坐标进行数学变换完成的: Projection - 这个变换是基于他们所显示的 ...

  4. [Swift]LeetCode16. 最接近的三数之和 | 3Sum Closest

    Given an array nums of n integers and an integer target, find three integers in nums such that the s ...

  5. [Swift]LeetCode115. 不同的子序列 | Distinct Subsequences

    Given a string S and a string T, count the number of distinct subsequences of S which equals T. A su ...

  6. Python档案袋（列表、元组、字典、集合 )

    列表 可以同名,有序(通过下标可找到) 取值: 1 #声明列表 2 listx=["L0","L1","L2",33,"L4&qu ...

  7. 【机器学习】--线性回归中soft-max从初始到应用

    一.前述 Soft-Max是做多分类的,本身是哪个类别的概率大,结果就为对应的类别.为什么称之为Soft判别,原因是归一化之后的概率选择最大的作为结果,而不是只根据分子. 二.原理 sigmod函数: ...

  8. Netty(二) 从线程模型的角度看 Netty 为什么是高性能的？

    前言 在之前的 SpringBoot 整合长连接心跳机制 一文中认识了 Netty. 但其实只是能用,为什么要用 Netty?它有哪些优势?这些其实都不清楚. 本文就来从历史源头说道说道. 传统 IO ...

  9. C# - 2017微软校园招聘笔试题 之 MS Recognition[待解决]

    MS Recognition 在线提交: hihoCoder 1402 http://hihocoder.com/problemset/problem/1402 类似: OpenJudge - I:P ...

  10. 漫画：全面理解java.lang.IllegalArgumentException及其可用性设计

    经过一段时间的学习与实践,飞鸟已经可以独力解决一些问题.小鱼就让飞鸟讲述一些遇到的问题和解决过程. 报错日志: 这个产生的原因是我覆盖Collections.sort的Comparator方法的时候 ...