css自定义复选框样式

效果图如下:

代码如下:

<div class="more-options">
    <div class="close-more my-button">+</div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck1">
        <label for="myCheck1"></label>经济类型
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck2">
        <label for="myCheck2"></label>通风方式
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck3">
        <label for="myCheck3"></label>允许最大采深(米)
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck4">
        <label for="myCheck4"></label>供电方式
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck5">
        <label for="myCheck5"></label>冲击地压
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck6">
        <label for="myCheck6"></label>质量标准化等级
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck7">
        <label for="myCheck7"></label>型号
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck8">
        <label for="myCheck8"></label>煤层自燃倾向性
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck9">
        <label for="myCheck9"></label>水文地质类型
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck10">
        <label for="myCheck10"></label>矿井正常涌水量(m/h)
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck11">
        <label for="myCheck11"></label>主要灾害类型分裂
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck12">
        <label for="myCheck12"></label>煤矿类型
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck13">
        <label for="myCheck13"></label>瓦斯等级
    </div>
    <div class = "option-list">
        <input type="checkbox" id="myCheck14">
        <label for="myCheck14"></label>运输方式
    </div>
</div>

css样式如下:

.more-options label{
    background-color: transparent;
    border-radius: 50%;
    border:1px solid #ccc;
    width:20px;
    height:20px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
    margin-right:5px;
}
.more-options input:checked + label{
    background-color: transparent;
}
.more-options input:checked + label:after{
    content:"\2714";
    color: #FBA919;
}