css制作——漂亮的单选按钮效果（一）

html代码： 

<div class="test-input" >
    <label class="test-label">
        <input class="test-radio" type="radio" name="radio" value="0" checked="checked">
        <span class="silde-lr-btn"></span>
        <span class="silde-text">L</span>
    </label>
    <label class="test-label">
        <input class="test-radio" type="radio" name="radio" value="1">
        <span class="silde-lr-btn" ></span>
        <span class="silde-text">R</span>
    </label>
</div>

css代码：

<style>
    .test-input{
       width:200px;display:contents;
    }
    .test-label{
    position:relative;
        font-size: 0;
        }
    .test-radio{
        display:none;
    }
    .silde-lr-btn{background-color: rgb(181, 181, 181);
        width: 32px;    display: inline-block;
        height: 20px;
       text-align: center;
    }
    .test-radio:checked+ .silde-lr-btn:after{background-color: rgb(233, 150, 5);
        content: "";
        color: #fff;
        width: 32px;
        height: 20px;
        position: absolute;
        left: 0;
    }
    .silde-text{position: absolute; font-size: 14px;   z-index: 1;
        left: 13px;}
    .test-radio:checked~ .silde-text{
        color:#fff;
    }
</style>

显示效果如图