自定义radio与checkbox的样式

来源：互联网发布：mini ninjas for mac 编辑：程序博客网时间：2024/05/22 11:36

由于input中的radio与checkbox的样式比较单一而且样式不是很美观，所以我们一般都想定义一个自己比较喜欢的样式，偶然发现这种自定义方法比较容易理解，在此特意分享一下：

首先是自定义单选框样式及复选框样式具体代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>split方法</title><style type="text/css">*{margin: 0;padding: 0;}.one{margin: 50px;}.one input[type='radio']{margin-left: 2px;margin-right: 2px;display: none;}.one input[type='radio']+label:before{content: '';display: inline-block;width: 10px;height: 10px;margin-right: 5px;border-radius: 100%;vertical-align: middle;border: 2px solid #E4E4E4;background: #F9F9F9;}.one input[type='radio']:checked+label:before{background: #777777;}.one input[type='checkbox']{display: none;}.one input[type='checkbox']+label:before{content: '';width: 10px;height: 10px;vertical-align: middle;margin-right: 5px;display: inline-block;background: #F9F9F9;border: 2px solid #CCCCCC;}.one input[type='checkbox']:checked+label:before{background: lightcoral;}</style></head><body><!--radio--><div class="one" id="one"><input type="radio" name="pay" id="p_yes" class="rdo"/><label for="p_yes">是</label><input type="radio" name="pay" id="p_no" class="rdo"/><label for="p_no">否</label></div><!--checkbox--><div class="one"><input type="checkbox" name="fav" id="book" class="rdo"/><label for="book">Book</label><input type="checkbox" name="fav" id="run" class="rdo"/><label for="run">Run</label><input type="checkbox" name="fav" id="music" class="rdo"/><label for="music">Music</label><input type="checkbox" name="fav" id="ktv" class="rdo"/><label for="ktv">KTV</label><input type="checkbox" name="fav" id="swimming" class="rdo"/><label for="swimming">swimming</label></div></body></html>

效果图如下：

0 0