有时候有很多蛋疼的需求。比如修改单选框的默认颜色
直接修改是肯定不可以的。
解决方案就是利用 :checked 属性 可以这样
.checkbox input:checked + .type{
color: #47c1d0;
}
这里的 + 就是获取下一个兄弟元素
关门放代码
css
<style>
.checkbox{
position: relative;
width: 15px;
height: 15px;
}
.checkbox input{
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0;
}
.checkbox .type{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
border: 4px solid;
border-radius: 50%;
color: #ddd;
}
.checkbox input:checked + .type{
color: #47c1d0;
}
</style>
html
<div class="checkbox">
<input type="checkbox" value="on">
<span class="type"></span>
</div>
效果图
off
on
OK
--END--
