input复选框checkbox的样式修改
程序员文章站
2022-05-16 14:57:44
...
这次给大家带来input复选框checkbox的样式修改,input复选框checkbox样式修改的注意事项有哪些,下面就是实战案例,一起来看一下。
修改之前的样式
修改之后的样式
html
<input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
css
input[type="checkbox"]{width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle; line-height: 18px;position: relative;} input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9} input[type="checkbox"]:checked::before{content: "\2713";background-color: #fff;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #e50232;color:#e50232;font-size: 20px;font-weight: bold;}
“\2713”实体符号√ ;
选中的颜色可以在input[type="checkbox"]:checked::before里修改border-color及color就可以了
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
Gulp命令生成精灵图
Safari浏览器select下拉列表文字太长不换行的解决方法
以上就是input复选框checkbox的样式修改的详细内容,更多请关注其它相关文章!
推荐阅读
-
javascript 设置某DIV区域内的checkbox复选框
-
js判断checkbox是否被选中(js获取复选框选中的值 )
-
css样式之区分input是按钮还是文本框的方法第1/4页
-
控制input的CSS但不影响CheckBox以及Radio的样式
-
eclipse中文件打开的默认样式修改方法
-
修改Android App样式风格的方法
-
vue基于element-ui的三级CheckBox复选框功能的实现代码
-
jQuery操作 input type=checkbox的实现代码
-
解决ie动态修改link样式,import css不刷新的问题
-
使用CSS3实现input多选框自定义样式的方法示例