修改原生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. 关于动态内存malloc和realloc

    1.malloc   1.申请的内存长度可以运行时决定,单位是字节  2.申请的内存为连续的内存空间  3.返回的地址可以根据实际需要强转成对应的类型  4.动态申请内存的生命周期是整个程序,除非手动 ...

  2. centos7.4 64位安装 google-chrome 与 chromedriver 运行 Python selenium 项目

    centos7.4 实例 利用 yum 命令安装 google-chrome 超级简单(安装最新版): yum install https://dl.google.com/linux/direct/g ...

  3. Java继承（上）

    继承的定义 在人类生活中的学徒关系,父子关系等等都属于继承: 但是在程序中是一种类与类的关系 在程序中可以使用父类的方法,也可以添加自己的方法,但是不能选择的继承,要继承就需要把所有的特点全部继承下来 ...

  4. NPOI导出excel（2.0.6版本）

    public static void WriteExcel(System.Data.DataTable dt,string fileName) { NPOI.XSSF.UserModel.XSSFWo ...

  5. 不常用的vi命令

    vi u 撤回ctrl+r 撤回的撤回 全文替换%s/old/new/g 指定行区间替换12,15s/old/new/g c替换前确认12,15s/old/new/gc 用#代替分隔符,用户关键字有/ ...

  6. python3学习笔记五（列表2）

    参考http://www.runoob.com/python3/python3-list.html 嵌套列表 a = ['a','b','c']b = [1,2,3]x = [a, b]print(x ...

  7. MongoDB查询优化

    项目场景:Mongo在首次查询特慢,后面就好的.如果长时间不查询,下次开始的第一次又将非常慢,于是从链接当时多方面,排查最终发现还是mongo索引建的有问题. MongoDB在大批量数据查询时经常会遇 ...

  8. 学习笔记之Problem Solving with Algorithms and Data Structures using Python

    Problem Solving with Algorithms and Data Structures using Python — Problem Solving with Algorithms a ...

  9. ss客户端以及tcp,udp,dns代理ss-tproxy本地安装版--centos7.3 x64以上(7.3-7.6x64测试通过)

    因为下载的文件,从cn下载很慢,或者下不动,所以我弄了一个本地安装版 本地安装的文件,我是从网上单独下载了,这里就不提供了. 记得在最后设置允许访问的局域网IP段 ## iptables 配置ipta ...

  10. vim中行末去掉^M

    方式1: 输入 :%s/^M//g 方式2: 输入:%s/\r//g