直接上代码:

看的懂看,看不懂拉到。

.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. Day3-Q-修补木桶 HihoCoder1362

    一只木桶能盛多少水,并不取决于桶壁上最高的那块木板,而恰恰取决于桶壁上最短的那块. 已知一个木桶的桶壁由N块木板组成,第i块木板的长度为Ai. 现在小Hi有一个快捷修补工具,每次可以使用修补工具将连续 ...

  2. django+celery+ RabbitMQ实现异步任务实例

    背景   django要是针对上传文件等需要异步操作的场景时,celery是一个非常不错的选择.笔者的项目就是使用了这个组合,这里就做一个备忘吧. 安装RabbitMQ   这个安装及使用我已经在前一 ...

  3. C# 篇基础知识11——泛型和集合

    .NET提供了一级功能强大的集合类,实现了多种不同类型的集合,可以根据实际用途选择恰当的集合类型. 除了数组 Array 类定义在System 命名空间中外,其他的集合类都定义在System.Coll ...

  4. (十)微信小程序---上传图片chooseImage

    官方文档 示例一 wxml <view bindtap="uploadImage">请上传图片</view> <image wx:for=" ...

  5. 1_01_MSSQL课程_基础入门2

    1.数据库的迁移方案 ->分离 附加 ->权限问题: ->启用Administrator账号 ->把数据库文件放到默认的数据库文件存放目录. ->数据库文件兼容级别,设置 ...

  6. 赶在EW2020之前,FreeRTOS发布V10.3.0,将推出首个LTS版本

    点击下载:FreeRTOSv10.3.0.exe 说明: 1.新版更新: (1)对于IAR For RISC-V进行支持,并且加强了对RISC-V内核芯片支持,做了多处修正. (2)对阿里平头哥CH2 ...

  7. 简述DDD,战略设计

    从What.How.Why三个层面进行了梳理. What:DDD是什么?DDD是用来解决软件复杂度的问题,是一种软件思想. Why:为什么DDD可以解决软件复杂度?对于规模造成的复杂度,可以借助限界上 ...

  8. python二维图像输出操作大全(非常全)!

    //2019.07.141.matplotlib模块输出函数图像应用时主要用的是它的ptplot模块,因此在导入使用该模块时可以直接用以下语句:import matplotlib.pyplot as ...

  9. HDU - 1698 Just a Hook (线段树---区间修改)

    题意:n个棍子,初始值全为1,给定Q个区间,分别赋值,问n个棍子的总值. 分析:lazy标记主要体现在update上. 当l <= L && R <= r时,该结点的子结点 ...

  10. UVA - 524 Prime Ring Problem(素数环)(回溯法)

    题意:输入n,把1~n组成个环,相邻两个数之和为素数. 分析:回溯法. #pragma comment(linker, "/STACK:102400000, 102400000") ...