css_input[checked]复选框去掉默认样式并添加新样式

效果对比：

“\2713”实体符号√ ；如有兴趣查看详细实体符号请点这里

代码实现：

 1 <!DOCTYPE html>
 2 <html>
 3
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             input[type="checkbox"] {
 9                 width: 12px;
10                 height: 12px;
11                 display: inline-block;
12                 text-align: center;
13                 vertical-align: middle;
14                 line-height: 12px;
15                 position: relative;
16             }
17
18             input[type="checkbox"]::before {
19                 content: "";
20                 position: absolute;
21                 top: 0;
22                 left: 0;
23                 background: #fff;
24                 width: 100%;
25                 height: 100%;
26                 border: 1px solid #CACDCF
27             }
28
29             input[type="checkbox"]:checked::before {
30                 content: "\2713";
31                 background-color: #2196F3;
32                 color: #fff;
33                 position: absolute;
34                 top: 0;
35                 left: 0;
36                 width: 100%;
37                 border: 1px solid #2196F3;
38                 font-size: 12px;
39                 font-weight: bold;
40             }
41         </style>
42     </head>
43
44     <body>
45         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
46         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
47         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
48         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
49         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
50         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
51     </body>
52
53 </html>

View Code

参考博客

转载于:https://www.cnblogs.com/wush-1215/p/9810993.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单选框 ...
php一些单选、复选框的默认选择方法
[1]radio和checkbox及php select默认选择的实现代码来源: 互联网发布时间: 2013-12-24 1.radio单选框的默认选择实现代码示例: <inpu ...
checked复选框的使用
众所周知,input标签是有很多类型的,比如说当type="text"的文本类型;type="date"时就会出现一个日期控件;type="passw ...
java控件数组_java通过复选框控件数组实现添加多个复选框控件示例分享
思路如下: 创建JPanel面板对象: 使用JPanel类的setLayout(0,4)方法设置网格布局管理器,即列数为4,行数自动调节: 创建一个字符串型一维数组作为控件文本数组: 创建一个JChe ...
java控件数组_java通过复选框控件数组实现添加多个复选框控件
编写程序,通过复选框控件数组事先选择用户爱好信息的复选框,在该程序中,要求界面中的复选框数量可以根据指定复选框名称的字符串数组的长度来自动调节.方法如下: 创建JPanel面板对象: 使用JPanel ...
java checkbox数组_Java通过复选框控件数组实现添加多个复选框控件
编写程序,通过复选框控件数组事先选择用户爱好信息的复选框,在该程序中,要求界面中的复选框数量可以根据指定复选框名称的字符串数组的长度来自动调节. 思路如下: 创建JPanel面板对象: 使用JPane ...
改变复选框的默认样式，将其变成圆形，背景色为绿色
我们经常使用input复选框,它有自己的默认样式,很多时候,为了使页面更美观,我们需要修改复选框的样式.通常使用的修改方式有两种,一个是链入图片,另一个是使用纯css的方法进行修改.如果事先有设计好的 ...
html5复选框控制按钮状态,HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件...
本篇教程探讨了HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < ...

css_input[checked]复选框去掉默认样式并添加新样式

css_input[checked]复选框去掉默认样式并添加新样式相关推荐

最新文章

热门文章