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

效果图:

移入:

<!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. easyui自定义皮肤及缺陷修改

    引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, ...

  2. ReactNative问题随记1 Exception in thread "main" java.lang.RuntimeException: gradle-2.14.1-all.zip

    ReactNative问题随记 想运行在真机上,在运行命令react-native run-android遇到错误如下: Scanning 559 folders for symlinks in D: ...

  3. [Swift]LeetCode906. 超级回文数 | Super Palindromes

    Let's say a positive integer is a superpalindrome if it is a palindrome, and it is also the square o ...

  4. EPPlusHelper

    public class EPPlusExcelHelper : IDisposable { public ExcelPackage ExcelPackage { get; private set; ...

  5. linux下crontab的使用

    在LINUX中,周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron].cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间.cron的配置文件称为“cr ...

  6. Redux源码学习笔记

    https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...

  7. 甘果移动老甘：移动互联网变迁中的App和小程序

    2018 年 10 月13 日,由又拍云和知晓云联合主办的 Open Talk 丨2018 小程序开发者沙龙系列活动广州站拉开帷幕,甘果移动的 CEO 路文杰(老甘)在沙龙上做了<移动互联网变迁 ...

  8. TypeScript 基础知识点整理

    一.TypeScript的特点 1.支持ES6规范 2.强大的IDE支持(集成开发环境) 允许为变量指定类型,减少你在开发阶段犯错误的几率. 语法提示,在IDE编写代码时,它会根据你所处的上下文把你能 ...

  9. 前端笔记之JavaScript（三）关于条件判断语句、循环语句那点事

    一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力语法 ...

  10. 前端笔记之JavaScript（二）关于运算符&初识条件判断语句

    运算符 数学运算符的正统,number和number的数学运算,结果是number.出于面试的考虑,有一些奇奇怪怪的数学运算: 数学运算中:只有纯字符串.布尔值.null能够进行隐式转换. //隐式转 ...