修改原生checkbox样式。

效果

原理

1.利用CSS3属性 appearance。

该属性（强制）更改（改变）默认（原生）样式。

Firefox 支持替代的 -moz-appearance 属性；Safari 和 Chrome 支持替代的 -webkit-appearance 属性；IE不支持该属性。

所以可以利用该属性取消checkbox的原生样式。

2.利用:checked选择器

当checkbox被选中的时候改变样式。

3. :after选择器 + content属性

:after选择器向元素之后插入内容。

我们再利用text-aligen和line-height让内容正居中就行了。

源码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>checkbox</title>

    <style>

        input {

            width: 16px;

            height: 16px;

            margin-top: 0;

            background-color: #fff;

            border: 1px solid #c9c9c9;

            border-radius: 2px;

            color: #fff;

            text-align: center;

            line-height: 15px;

            -webkit-appearance:none;

            -moz-appearance:none;

            -ms-appearance:none;

            -o-appearance:none;

            appearance:none;

            outline: none;

        }

        input:hover {

            border-color: #43adea;

        }

        input:checked {

            color: #fff;

            background-color: #43adea;

            border: 1px solid #43adea;

        }

        input:after {

            content: "✔";

        }

    </style>

</head>

<body>

    <input type="checkbox">

    <input type="checkbox">

</body>

</html>

【CSS】自定义checkbox样式的更多相关文章

  1. 自定义checkbox样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 自定义 checkbox 样式

    前言:最近在做一个网站,为了统一风格,需要自定义checkbox的样式.所以花了点时间参考了 研究了一下.感觉上面的方法略微麻烦.所以自己重新写了下面的代码,欢迎大家指教.同时,感谢w3cplus提供 ...

  3. WPF 自定义CheckBox样式

    自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...

  4. CSS控制checkbox样式

    原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...

  5. Android之自定义checkbox样式

    大部分情况下,我们在UI中并不采用Android自带的checkbox复选框样式,这时候就需要我们自定义自己的checkbox. 首先找两张checkbox背景图片,比如下图样子的: 然后在drawa ...

  6. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  7. [转]Android中自定义checkbox样式

    android中自定义checkbox的图片和大小   其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=" ...

  8. bootstrap table 自定义checkbox样式

    //css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...

  9. css自定义checkbox和radio样式

    很常见的问题,也有许多人写过类似的文章,自己写来记录下 css代码如下: #myCheck + label,.myRadio + label{ width:16px; height:16px; bor ...

随机推荐

  1. 解决 windows下安装Anaconda后python pip不可用的情况

    在windows系统下通过安装Anaconda的方式安装的python使用中发现不能再通过pip安装python包.只能通过conda install packname 的方法,导致很多conda不支 ...

  2. 在C#中如何判断线程当前所处的状态

    在C#中,线程对象Thread使用ThreadState属性指示线程状态,它是带Flags特性的枚举类型对象.   ThreadState 为线程定义了一组所有可能的执行状态.一旦线程被创建,它就至少 ...

  3. grep init 与 grep [i]nit

    看grep的知识点的时候,在XXX博客里看到一个这样的例子,一直在纠结,纠结,init与[i]nit 匹配到的东西不应该时一样的嘛,为什么一个匹配得出来,一个不行.后来在群里问了某位大哥,耐心的讲解, ...

  4. IIS 负载均衡

    在大型Web应用系统中,由于请求的数据量过大以及并发的因素,导致Web系统会出现宕机的现象,解决这一类问题的方法我个人觉得主要在以下几个方面: 1.IIS 负载均衡. 2.数据库 负载均衡. 3.系统 ...

  5. golang垃圾回收和SetFinalizer

    golang自带内存回收机制--GC.GC通过独立的进程执行,它会搜索不再使用的变量,并释放.需要注意的是,进行GC会占用机器资源. GC是自动进行的.如果要手动进行GC,可以调用runtime.GC ...

  6. java File处理

    /**************************************************************************************工具类********** ...

  7. springMVC接收参数的区别form data与query string parameters与request payload

    在AJAX请求中,我见过有三种form表单数据类型提交. 第一种:form data, 第二种:query string parameters,第三种:request payload. 在google ...

  8. LeetCode【88. 合并两个有序数组】

    首先想到的方法就是,假设一个nums3数组,然后,比较nums1与nums2的数值大小,然后,放在nums3中,再将nums3转移到nums1中. 实现起来很麻烦,1.没有考虑到下标问题,结果就Arr ...

  9. Android开发 assets目录

    Android资源文件分类: Android资源文件大致可以分为两种: 第一种是res目录下存放的可编译的资源文件: 这种资源文件系统会在R.Java里面自动生成该资源文件的ID,所以访问这种资源文件 ...

  10. OpenGL中投影矩阵基础知识

    投影矩阵元素Projection Matrix 投影矩阵构建: 当f趋向于正无穷时: 一个重要的事实是,当f趋于正无穷时,在剪裁空间中点的z坐标跟w坐标相等.计算方法如下: 经过透视除法后,z坐标变为 ...