总结：如何修改美化radio、checkbox、select的默认样式
现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox、 样式的方法。 原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给<input>元素设置为透明，然后通过定位让用户看到的是<label>元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即 input[type=checkbox]:checked+label{} 利用css3伪元素实现样式修改 html代码 <p>您的性别：</p> <div class="radio-sex"> <input type="radio" id="sex1" name="sex"> <label for="sex1"></label> <span>男</span> </div> <div class="radio-sex"> <input type="radio" id="sex2" name="sex"> <label for="sex2"></label> 女 </div> css样式 .radio-sex { position: relative; display: inline-block; margin-right: 12px; } .radio-sex