css_input[checked]复选框去掉默认样式并添加新样式
效果对比：
“\2713”实体符号√ ；如有兴趣查看详细实体符号请点这里
代码实现：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input[type="checkbox"] {
width: 12px;
height: 12px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 12px;
position: relative;
} input[type="checkbox"]::before {
content: "";
position: absolute;
top:;
left:;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #CACDCF
} input[type="checkbox"]:checked::before {
content: "\2713";
background-color: #2196F3;
color: #fff;
position: absolute;
top:;
left:;
width: 100%;
border: 1px solid #2196F3;
font-size: 12px;
font-weight: bold;
}
</style>
</head> <body>
<input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
<input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
<input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
<input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
<input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
<input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
</body> </html>
css_input[checked]复选框去掉默认样式并添加新样式的更多相关文章
- HTML复选框checkbox默认样式修改
此方法可以将复选框的默认样式替换成任意样式.如图: 未选择: 选择时: 思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框. 代码如下: <!DOCTYPE ht ...
- php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
- jquery：获取checked复选框的问题
jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...
- Java通过复选框控件数组实现添加多个复选框控件
编写程序,通过复选框控件数组事先选择用户爱好信息的复选框,在该程序中,要求界面中的复选框数量可以根据指定复选框名称的字符串数组的长度来自动调节. 思路如下: 创建JPanel面板对象: 使用JPane ...
- easyui的combobox将得到的数据设定为下拉框默认值和复选框设定默认值
通过easyui做了一个表,表里是从数据库拿到的数据. 现在双击某一行,通过点击行的id取到这一行的所有数据,现在需要修改这些得到的数据, 其中部分数据是<select>这个选择的, 问题 ...
- Dtree 添加 checkbox 复选框 可以默认选中
一:目标 要实现用一个树形结构的展示数据,每个节点(除了根节点)前有一个checkbox,同时,点击父节点,则子节点全选或者全不选,当选中了全部子节点,父节点选中:如下图所示: 同时可以在创建的时候, ...
- input复选框checkbox默认样式纯css修改
修改之前的样式 修改之后的样式 html <input type="checkbox" name="btn" id="btn1"&g ...
- jquery操作radio单选按钮、checked复选框。
一.radio 取值: $('input[name=radio]:checked').val(); 二.checked 判断checked是否被选中 $("input[type='check ...
- mysql导入导出数据中文乱码解决方法小结(1、navicat导入问题已解决，创建连接后修改连接属性，选择高级->将使用Mysql字符集复选框去掉，下拉框选择GBK->导入sql文件OK;2、phpmyadmin显示乱码的问题也解决，两步：1.将sql文件以utf8的字符集编码另存，2.将文件中sql语句中的字段字符集编码改成utf8,导入OK)
当向 MySQL 数据库插入一条带有中文的数据形如 insert into employee values(null,'张三','female','1995-10-08','2015-11-12',' ...
随机推荐
- Linux 下定位java应用 cpu高的原因（转）
使用场景: 遇到Linux下java应用cpu占用很高的时候,我们很想知道此时的应用到底在做什么导致资源的消耗. 方便我们进一步定位和优化~ 1.查询cpu耗用top5的进程(你也可以top10) [ ...
- BZOJ 1222 产品加工(DP)
某加工厂有A.B两台机器,来加工的产品可以由其中任何一台机器完成,或者两台机器共同完成.由于受到机器性能和产品特性的限制,不同的机器加工同一产品所需的时间会不同,若同时由两台机器共同进行加工,所完成任 ...
- POJ 3276 Face The Right Way(前缀和优化)
题意:有长度为N的01串,有一个操作可以选择连续K个数字取反,求最小的操作数和最小的K使得最后变成全1串.(N<=5000) 由于K是不定的,无法高斯消元. 考虑枚举K,求出最小的操作数. 显然 ...
- BZOJ3717 PA2014Pakowanie（状压dp）
显然贪心地有尽量先往容量大的背包里放.设f[i]为i子集物品最小占用背包数,g[i]为该情况下最后一个背包的剩余容量,转移显然. #include<iostream> #include&l ...
- 洛谷 P2015 二叉苹果树
老规矩,先放题面 题目描述 有一棵苹果树,如果树枝有分叉,一定是分2叉(就是说没有只有1个儿子的结点) 这棵树共有N个结点(叶子点或者树枝分叉点),编号为1-N,树根编号一定是1. 我们用一根树枝两端 ...
- [BZOJ4027]兔子与樱花
4027: [HEOI2015]兔子与樱花 Time Limit: 10 Sec Memory Limit: 256 MB Description 很久很久之前,森林里住着一群兔子.有一天,兔子们突 ...
- 【BZOJ1014】火星人（Splay，哈希）
[BZOJ1014]火星人(Splay,哈希) 题面 BZOJ 题解 要动态维护这个串,一脸的平衡树. 那么用\(Splay\)维护这个哈希值就好了. 每次计算答案的时候二分+Splay计算区间哈希值 ...
- 洛谷 P1171 售货员的难题 【状压dp】
题目描述 某乡有n个村庄(1<n<20),有一个售货员,他要到各个村庄去售货,各村庄之间的路程s(0<s<1000)是已知的,且A村到B村与B村到A村的路大多不同.为了提高效率 ...
- redis的Pub/Sub功能
Pub/Sub功能(即Publish,Subscribe)意思是发布及订阅功能.简单的理解就像我们订阅blog一样,不同的是,这里的客户端与server端采用长连接建立推送机制,一个客户端发布消息,可 ...
- Linux内核设计与实现第五周读书笔记
第十八章 调试 18.1准备开始 需要的只是: 一个确定的bug.大部分bug通常都不是行为可靠而且定义明确的. 一个藏匿bug的内核版本. 相关的内核代码的知识和运气. 18.2内核中的bug 内核 ...