直接上代码:

看的懂看,看不懂拉到。

.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. Linux密码复杂度问题

    转:http://hunkz.blog.51cto.com/6157447/1630369

  2. springboot整合logback集成elk实现日志的汇总、分析、统计和检索功能

    在Spring Boot当中,默认使用logback进行log操作.logback支持将日志数据通过提供IP地址.端口号,以Socket的方式远程发送.在Spring Boot中,通常使用logbac ...

  3. PHP-WebShell-Bypass-WAF

    PHP-WebShell-Bypass-WAF PHP WebShell 一句话的结构是:输入和执行,这是经典的PHP 一句话代码: <?php eval($_GET['test']); ?&g ...

  4. loadBeanDefinitions方法源码跟踪(三)

    因为字数超过了限制,所以分成了三篇,承接上篇: https://www.jianshu.com/p/46e27afd7d96 代码过宽,可以shift + 鼠标滚轮 左右滑动查看 4.parseCus ...

  5. 云时代架构阅读笔记十五——之前碰到的Java面试题

    1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.Java有 ...

  6. js加密(十二)yy.com rsa

    1. url: https://aq.yy.com/ 2. target: 登录js 3. 是一个简单的rsa加密,找到加密的js文件,全部复制出来,修改一下就好. 4. 和网页中的一样

  7. DOM基础1

    Document Object Model 文档对象模型 1.改内容: innerHTML 例:div1.innerHTML = "我能干<br />什么";      ...

  8. c# copydata 消息

    using PublicCode; using System; using System.Collections.Generic; using System.ComponentModel; using ...

  9. 吴裕雄--天生自然java开发常用类库学习笔记:List接口

    import java.util.ArrayList ; import java.util.List ; import java.util.Collection ; public class Arra ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-eject

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...