有時候有很多蛋疼的需求涯鲁。比如修改單選框的默認顏色
直接修改是肯定不可以的溪椎。
解決方案就是利用 :checked 屬性 可以這樣
.checkbox input:checked + .type{
color: #47c1d0;
}
這里的 + 就是獲取下一個兄弟元素
關(guān)門放代碼
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--
