直接上代码:

看的懂看,看不懂拉到。

.messageState li {list-style: none;float: left;padding-right:30px;font-size: 16px;color: #1e1e1e;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;}
.messageState li input[type="checkbox"] {position: absolute;clip: rect(0, 0, 0, 0);}
.messageState li input[type="checkbox"] + label::before {
    content: "\a0";
    display: inline-block;
    vertical-align: 0px;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    text-indent: 2px;
    line-height: 13px;
}
.messageState li input[type="checkbox"]:checked + label::before {
    content: "\2713";
    color: white;
    background-color: #009FE1;
}
.messageState li input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 1px 3px #eee;
}
.messageState li input[type="checkbox"]:disabled + label::before {
    box-shadow: none;
    background-color: gray;
    color: #555;
}

自定义checkbox,redio等的更多相关文章

  1. 自定义 checkbox 新玩法 ?

    自定义 checkbox 新玩法 ? 第一步:selector 编写 drawable/selector_checkbox_voice.xml <?xml version="1.0&q ...

  2. Yii提供的Htmler助手checkboxList可自定义Checkbox输出格式

    foreach($catetags as $cate){ echo Html::checkboxList('category_id','',$cate,['item'=>'customCheck ...

  3. jquery validate自定义checkbox验证规则和样式

    参考:http://blog.csdn.net/xh16319/article/details/9987847 自定义checkbox验证,“检查checkbox是否选中” jQuery.valida ...

  4. html自定义checkbox、radio、select —— select篇

    上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...

  5. html自定义checkbox、radio、select —— checkbox、radio篇

    前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...

  6. 自定义checkbox样式

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

  7. Android之自定义checkbox样式

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

  8. 自定义checkbox, radio样式

    17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...

  9. 自定义checkbox/radio

    一. label标签 1. 概念: HTML <label>元素表示用户界面中项目的标题.它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性.这样的控制称作label ...

随机推荐

  1. Day1-Luogu-1631

    题目描述 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2N2个和,求这N^2N2个和中最小的N个. 输入输出格式 输入格式: 第一行一个正整数N: 第二行N个整数A_iAi​, ...

  2. ThreadLocal的原理和在框架中的应用

    ThreadLocal的原理和在框架中的应用 博客分类: java基础 框架多线程SpringthreadDAO  概述      我们知道Spring通过各种DAO模板类降低了开发者使用各种数据持久 ...

  3. url的构成

    url的构成:一般来说,http请求都会和URL地址有关,对于url来说一般由下面5个部分构成 .协议:通常就是第一个冒号之前的内容常见协议:http,https(http+ssl),ftp,ssh, ...

  4. 配置uboot指定nfs挂载根文件系统

    背景: 文件系统的调试也建议在 网络中进行. 概念: NFS是Network File System的缩写及网络文件系统. 要功能是通过局域网络让不同的主机系统之间可以共享文件或目录. NFS系统和W ...

  5. C语言常用函数

    一.数学函数 调用数学函数时,要求在源文件中包下以下命令行: #include <math.h> 函数原型说明 功能 返回值 说明 int abs( int x) 求整数x的绝对值 计算结 ...

  6. JDK8~JDK11的新特性

    #JDK 1.8 新特性接口中的静态方法 只能由接口自己调用 接口中的默认方法 可以不被覆盖 #JDK 1.9 新特性(可能在JDK8中被忽略了,没来得及加)接口可以定义私有方法,但是只能让自己调用, ...

  7. 计算机是如何计算的、运行时栈帧分析(神奇i++续)

    关于i++的疑问 通过JVM javap -c 查看字节码执行步骤了解了i++之后,衍生了一个问题: int num1=50; num1++*2执行的是imul(将栈顶两int类型数相乘,结果入栈), ...

  8. 065、Java面向对象之定义一个Book类,在主类中使用Book类

    01.代码如下: package TIANPAN; class Book { // 定义一个新的类 String title; // 书的名字 double price; // 书的价格 public ...

  9. 1.HDFS分布式文件系统

    HDFS概述及设计目标 如果让我们自己设计一个分布式文件存储系统,怎么做? HDFS设计目标 非常巨大的分布式文件系统 运行在普通廉价的硬件上 易扩展,为用户提供性能不错的文件存储系统 HDFS架构 ...

  10. Flume 1.9.0 的安装(比较简单, 操作也不像老版本那么繁琐了)

    之前已经完成了Hadoop集群.Hbase集群.Hive的搭建, 这次来安装一下flume-1.9.0 安装过程 将tar包上传并解压到指定目录, 并修改名称 tar -zxvf apache-flu ...