自定义checkbox,redio等
直接上代码:
看的懂看,看不懂拉到。
.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等的更多相关文章
- 自定义 checkbox 新玩法 ?
自定义 checkbox 新玩法 ? 第一步:selector 编写 drawable/selector_checkbox_voice.xml <?xml version="1.0&q ...
- Yii提供的Htmler助手checkboxList可自定义Checkbox输出格式
foreach($catetags as $cate){ echo Html::checkboxList('category_id','',$cate,['item'=>'customCheck ...
- jquery validate自定义checkbox验证规则和样式
参考:http://blog.csdn.net/xh16319/article/details/9987847 自定义checkbox验证,“检查checkbox是否选中” jQuery.valida ...
- html自定义checkbox、radio、select —— select篇
上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...
- html自定义checkbox、radio、select —— checkbox、radio篇
前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...
- 自定义checkbox样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Android之自定义checkbox样式
大部分情况下,我们在UI中并不采用Android自带的checkbox复选框样式,这时候就需要我们自定义自己的checkbox. 首先找两张checkbox背景图片,比如下图样子的: 然后在drawa ...
- 自定义checkbox, radio样式
17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...
- 自定义checkbox/radio
一. label标签 1. 概念: HTML <label>元素表示用户界面中项目的标题.它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性.这样的控制称作label ...
随机推荐
- leetcode142 Linked List Cycle II
""" Given a linked list, return the node where the cycle begins. If there is no cycle ...
- mysql5.7.26安装
h https://www.cnblogs.com/zgqbky/p/11699282.html 张国强(明了) tar -xf mysql-5.7.26-1.el7.x86_64.rpm-bundl ...
- hdu 1874 畅通工程续(SPFA模板)
畅通工程续 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- 深入 理解char * ,char ** ,char a[ ] ,char *a[] 的区别
转自:https://blog.csdn.net/liusicheng2008_liu/article/details/80412586 1 数组的本质 数组是多个元素的集合,在内存中分布在地址相连的 ...
- python merge、join、concat用法与区别
由于合并变化较大,以后函数可能会修改,只给出一些例子作为参考 总结: merge.join 1.当没有索引时:merge.join为按照一定条件合并 2.当有索引.并按照索引合并时,得到结果为两者混 ...
- idea2018破解到2099年
破解的详细过程: 1.从下面地址下载一个jar包,名称是 JetbrainsCrack-3.1-release-enc.jar 下载地址链接: https://pan.baidu.com/s/1WU5 ...
- PHP处理大数据量老用户头像更新的操作--解决数据量大超时的问题
/** * @title 老用户头像更新--每3秒调用一次接口,每次更新10条数据 * @example user/createHeadPicForOldUser? * @method GET * @ ...
- C语言中语句的跨行支持总结
C语言中语句的跨行支持总结: 预处理一行写不下: 把一个预处理指示写成多行要用""续行,因为根据定义,一条预处理指示只能由一个逻辑代码行组成. 正常程序一行写不下: 把C代码写成多 ...
- Mysql数据库的简单介绍与入门
Mysql数据库的简单介绍与入门 前言 一.下载与安装 1.下载 官网下载MYSQL5.7.21版本,链接地址https://www.mysql.com/downloads/.下载流程图如下: 找到M ...
- A convenient way to recognize and handwrite multidimensional arrays in Numpy
As a new learner of Numpy, it is very common to be confused by the form of array, braces nested in b ...