效果圖以下:

代碼以下:

    <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;
    }