利用伪元素美化input默认样式

需要选中与未选中的图片

效果：

image.png

未选择状态

image.png

HTML
<li class="fareCost" value="1">
      Standard Shipping Costs$10.00     
        <input type="radio" id="fare0" name="fare" class="radio">
        <label for="fare0" class="labelfare"></label>
</li>

css
选中
.radio:checked+label {
    background: url(../../images/check_d.png) 100% no-repeat;
    background-size: 13px 13px;
}
未选中
.radio+label {
    background: url(../../images/check_u.png)100% no-repeat;
    background-size: 13px 13px;
    vertical-align: middle;
    height: 13px;
    width: 13px;
    display: inline-block;
}