Home > Web Front-end > JS Tutorial > Modify the style of input checkbox checkbox

Modify the style of input checkbox checkbox

php中世界最好的语言
Release: 2018-03-19 10:47:39
Original
5108 people have browsed it

这次给大家带来input复选框checkbox的样式修改,input复选框checkbox样式修改的注意事项有哪些,下面就是实战案例,一起来看一下。

修改之前的样式 

修改之后的样式

html

<input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
Copy after login

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;}
Copy after login

“\2713”实体符号√ ;

选中的颜色可以在input[type="checkbox"]:checked::before里修改border-color及color就可以了

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

HTML与CCS结合

Gulp命令生成精灵图
Safari浏览器select下拉列表文字太长不换行的解决方法

The above is the detailed content of Modify the style of input checkbox checkbox. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template