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',' ...
随机推荐
- php奇葩错误：htmlspecialchars处理中文丢失
$value = "中文中文"; $res = htmlspecialchars($value); 经过这个函数处理之后,$res就直接变成了空的字符串. 奇葩错误啊!后来发现要这 ...
- HDU4788_Hard Disk Drive
水题. 但是我写挫了一个地方,Wa了三发.好吧,不能忍了. 还有,本屌不知道如何用printf输出%,哪位学过C++的大仙知道这是什么情况? 告诉我一声啊. #include <iostrea ...
- BZOJ 1483 梦幻布丁(链表+启发式合并)
给出一个长度为n的序列.支持两种操作: 1.把全部值为x的修改成y.2.询问序列有多少连续段. 我们可以对于每个值建立一个链表.对于操作1,则可以将两个链表合并. 对于操作2,只需要在每次合并链表的时 ...
- pyhcarm github
1.主题 介绍如何用Pycharm实打实的创建.运行.调试程序. 2.准备工作 Pycharm版本为2.7或者更高. 至少安装一个Python解释器,2.4到3.3均可 3.下载安装Pycharm 下 ...
- hive 一次性命令
1.用hive查询,而不进入hive cli,查询后的值可以保存到文件中 #使用参数-e [hadoop@bigdata-senior01 ~]$ hive -e "select * fro ...
- [CF1103B]Game with modulo
题目大意:交互题,有一个数$a(a\leqslant10^9)$,需要猜出它的值,一次询问为你两个数字$x,y(x,y\in[0,2\times10^9])$: 若$x\bmod a\geqslant ...
- UIScrollView 在手指点击的坐标处放大
写了一个extension,如下: extension UIScrollView{ ///在ScrollView上的某个点放大 func zoomWithPoint(var zoomPoint:CGP ...
- 【BZOJ2806】Cheat（后缀自动机，二分答案，动态规划，单调队列）
[BZOJ2806]Cheat(后缀自动机,二分答案,动态规划,单调队列) 题面 BZOJ 洛谷 题解 很有趣的一道题啊 对于在所有的串上面进行匹配? 很明显的后缀自动机 所以先构建出广义后缀自动机 ...
- 【BZOJ4004】装备购买（线性基）
[BZOJ4004]装备购买(线性基) 题面 BZOJ 洛谷 Description 脸哥最近在玩一款神奇的游戏,这个游戏里有 n 件装备,每件装备有 m 个属性,用向量zi(aj ,.....,am ...
- NOIP2017 Day1 T3 逛公园（最短路+拓扑排序+DP）
神tm比赛时多清个零就有60了T T 首先跑出1起点和n起点的最短路,因为k只有50,所以可以DP.设f[i][j]表示比最短路多走i的长度,到j的方案数. 我们发现如果在最短路上的和零边会有后向性, ...