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; }
相关推荐
81463166 2020-01-04
88580793 2018-01-03
有心就有方向 2018-01-03
ELEMENTS爱乐小超 2020-04-23
waterv 2019-12-08
haocxy 2020-06-09
hehekai 2020-05-08
sixthelement 2020-04-09
lianback 2020-03-28
天步 2020-01-21
peixiaopao 2011-08-14
89387046 2017-11-08
taiyangyu 2019-09-04
herionliu 2019-09-05
83296631 2017-09-30
ddzhouqian 2015-05-06