在项目中会写页面会遇到UI设计师的主题色, 比如我这边的主题色是橙色, 然后涉及到单选多选的时候, 这些边框也得改变, 换成UI的主题色, 但是有一些标签就很复杂, 是浏览器规定死了, 开发权限并不能操作他们, 哪怕设置
appearance属性也没用, 比如单选啊, 多选, 还有深恶痛绝的原生select的option标签, 看一回吐一回然后我去网上找, 全是
input框下面接一个label标签, 吐了啊, 不是说不好, 这也是一种解决的方法, 但我肯定不能按照他们的方法来, 因为我的是前后端不分离的项目, 而且很多效果和接口都对接了, 按照他们的我这边得大改, 所以就根据他们的思路, 自己写了一个, 既然他们都是通过伪类, 我为什么不直接通过伪类去覆盖呢?跟着这个思路, 如下
更改单选框
直接上代码, 通过对伪类的before和affter, 去覆盖原来的属性, 然后去定位, 移动到你想要的值
线上效果图片
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 300px; height: 300px; margin: 100px auto; input[type="radio"]::before { position: relative; content: ""; top: -1px; left: -1px; width: 17px; height: 17px; display: block; border-radius: 50%; background-color: #fff; border: 1px solid #ff670c; z-index: 5; input[type="radio"]:checked::after { position: relative; content: ""; bottom: 15px; left: 4px; width: 9px; height: 9px; display: block; border-radius: 50%; visibility: visible; background-color: #ff670c; z-index: 6; </style> </head> <div class="box"> <input type="radio"> </body> </html>下面是复选框
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 300px; height: 300px; margin: 100px auto; input[type=checkbox]{ cursor: pointer; position: relative; width: 15px; height: 15px; font-size: 14px; input[type=checkbox]::after{ position: absolute; top: 0; border: none; /* background-color: #ff670c; */ color: #fff; width: 15px; height: 15px; display: inline-block; visibility: visible; padding-left: 0px; text-align: center; content: ' '; border-radius: 1px input[type=checkbox]:checked::after{ background-color: #ff670c; border-color: #ff670c; content: "✓"; font-size: 12px; font-weight: bold; </style> </head> <div class="box"> <input type="checkbox"> <input type="checkbox"> </body>
先上效果图
|
|