在项目中会写页面会遇到UI设计师的主题色, 比如我这边的主题色是橙色, 然后涉及到单选多选的时候, 这些边框也得改变, 换成UI的主题色, 但是有一些标签就很复杂, 是浏览器规定死了, 开发权限并不能操作他们, 哪怕设置
appearance属性也没用, 比如单选啊, 多选, 还有深恶痛绝的原生select的option标签, 看一回吐一回
然后我去网上找, 全是input框下面接一个label标签, 吐了啊, 不是说不好, 这也是一种解决的方法, 但我肯定不能按照他们的方法来, 因为我的是前后端不分离的项目, 而且很多效果和接口都对接了, 按照他们的我这边得大改, 所以就根据他们的思路, 自己写了一个, 既然他们都是通过伪类, 我为什么不直接通过伪类去覆盖呢?
跟着这个思路, 如下
- 更改单选框
直接上代码, 通过对伪类的before和affter, 去覆盖原来的属性, 然后去定位, 移动到你想要的值
线上效果图片
单选框样式未选中和已选中对比图.png
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<body>
<div class="box">
<input type="radio">
</div>
</body>
</html>
-
下面是复选框
先上效果图
复选框未选中和已选中样式修改.png
后面是代码
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<body>
<div class="box">
<input type="checkbox">
<input type="checkbox">
</div>
</body>
</html>
修改的就到这里啦, 如果对你有帮助, 就动动你的小手, 帮忙点个赞哦, 有支持才有动力, 以后有什么需要帮助的, 可以在下面留言哦, 如需转载, 请注明出处.
