直接上代码:

看的懂看,看不懂拉到。

.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. 黑客的探路狗ReconDog网站信息探测收集工具

    工具下载地址:http://pan.baidu.com/s/1pLJnBLL 密码:gqlz   OR  https://github.com/UltimateHackers/ReconDog 下载并 ...

  2. 题解 P5122 【[USACO18DEC]Fine Dining】

    思路:最短路+dp 1.先跑一遍最短路,计算出没有干草垛最少要多少时间 2.dp求出有干草垛至少需要多少时间,由于dp有后效性,所以用SPFA辅助转移,dp方程和求最短路一模一样,只是先将有干草垛的拉 ...

  3. vue中使用矢量图

    1.打开矢量图库,将需要的图表添加至购物车 2.将购物车的图标添加到一个项目中(便于后期增加更新)并下载至本地 3.将这四个文件及iconfont.css添加至项目的assets中 4.打开iconf ...

  4. POJ 1979 Red and Black 四方向棋盘搜索

    Red and Black Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 50913   Accepted: 27001 D ...

  5. PE文件中找导出表

    导出表: typedef struct _IMAGE_EXPORT_DIRECTORY { DWORD Characteristics; // 未使用,总为0 DWORD TimeDateStamp; ...

  6. MySQL学习之SQL基础(一)DML

    DML(data Manipulation language) INSERT DELETE UPDATE SELECT INSERT mysql> desc emp; +----------+- ...

  7. 编程题目:求幂 (python)

    数值的整数次方 效率0(lgn) 这个求幂函数无论 基数 或 次方 为 正数或者为负数都是成立的.只是他们都为整数罢了. 注意了哦,这个代码必须要用python3才能运行正确,因为python3的 整 ...

  8. Django(十)模型:django模型类对数据库的:增/删/改/查、自关联、管理器、元选项(指定表名)

    一.插入.更新和删除 调用一个模型类对象的save方法的时候就可以实现对模型类对应数据表的插入和更新. 调用一个模型类对象的delete方法的时候就可以实现对模型类对应数据表数据的删除. 二.自关联 ...

  9. Django(六)实战2:向数据库添加,删除数据、重定向写法、重定向简写

    一.向数据库添加图书数据 [上接]https://blog.csdn.net/u010132177/article/details/103831173 1)首先开启mysql服务,并运行项目 启动my ...

  10. Golang的标识符命名规则

    Golang的标识符命名规则 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.关键字 1>.Go语言有25个关键字 Go语言的25个关键字如下所示: break,defau ...