css -- 最简洁的css checked 样式代码

有时候有很多蛋疼的需求。比如修改单选框的默认颜色

直接修改是肯定不可以的。

解决方案就是利用 :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--