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

效果图:

移入:

<!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. vscode设置

    通过ctrl+滚轮实现字体大小改变:在文件-->首选项-->设置-->用户设置中添加如下代码:"editor.mouseWheelZoom": true,

  2. 给ASP.NET Core Web发布包做减法

    1.引言 紧接上篇:ASP.NET Core Web App应用第三方Bootstrap模板.这一节我们来讲讲如何优化ASP.NET Core Web发布包繁重的问题. 在ASP.NET Core W ...

  3. Portainer介绍

    Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容器控制台操作.Swarm集群和服 ...

  4. 在 Ubuntu 中使用 Visual Studio Code

    前言 我一直在 Linux 桌面系统下的探索寻找各种界面美观.使用舒适的软件工具.对于Linux下的开发人员来讲,这几年最大的福利就是 MicroSoft 推出的 Visual Studio Code ...

  5. CSS3禁止用户选中文字——user-select: none;

    需求:现在有一个需求是在移动端让你禁止用户选中文字,你会怎么做呢?如下图    解决方法:使用CSS3新增属性 user-select: none;   -webkit-user-select:non ...

  6. [Swift]LeetCode103. 二叉树的锯齿形层次遍历 | Binary Tree Zigzag Level Order Traversal

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  7. [Swift]LeetCode398. 随机数索引 | Random Pick Index

    Given an array of integers with possible duplicates, randomly output the index of a given target num ...

  8. [Swift]LeetCode878. 第 N 个神奇数字 | Nth Magical Number

    A positive integer is magical if it is divisible by either A or B. Return the N-th magical number.  ...

  9. [Swift]LeetCode975. 奇偶跳 | Odd Even Jump

    You are given an integer array A.  From some starting index, you can make a series of jumps.  The (1 ...

  10. 白话说java gc垃圾回收

    gc是java区别于其他好几门语言(c/c++)的一个代表功能(当然也有很多可以自动管理内存的语言,如所有的脚本语言,你根本不知道内存管理这回事)! 当然,之所以要把c/c++和java相比,是因为j ...