曲线修改CheckBox的样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了曲线修改CheckBox的样式相关的知识，希望对你有一定的参考价值。
在前端开发中，要做到CheckBox自定义的样式，实现起来可能会有点麻烦，以下介绍一种通过伪类来实现该功能的方法，希望会有用。
代码如下：
- <html>
- <head>
- <meta charset="UTF-8">
- <title>CheckBox</title>
- <style type="text/css">
- input[type=checkbox] {
- position: relative;
- }
- //这里是选中前的状态，可以直接以图片作为背景
- input[type=checkbox]::before{
- content:‘‘;
- position: absolute;
- background-color:#999;
- border-radius: 4px;
- //图片样式
- background:url(‘check.png‘) no-repeat;
- background-size: 100% 100%;
- }
- //这里是选中后的状态
- input[type=checkbox]:checked::before {
- color:white;
- background-color:red;
- content: ‘中‘;
- //图片样式
- background:url(‘checked.png‘) no-repeat;
- background-size: 100% 100%;
- }
- </style>
- </head>
- <body>
- <input type="checkbox"/>
- </body>
- </html>
PS：其实checkbox的样式还是浏览器的原始样式，只是在它原来的位置上通过（::before）重画了一个假象。
以上是关于曲线修改CheckBox的样式的主要内容，如果未能解决你的问题，请参考以下文章