使用纯css3自定义单选框radio和复选框checkbox_css3 自定义图标单选框-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_22557797/article/details/78484795

本文介绍了如何使用CSS3的`appearance`属性和`:checked`伪类来为单选框（radio）和复选框（checkbox）定制样式，主要适用于-webkit和-moz内核的浏览器，不考虑IE兼容性。内容包括`appearance`属性的7个参数解释以及`:checked`伪类的用法，并展示了自定义后的样式效果，同时提供了开关模式的复选框实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于本文中单选框与复选框的自定义样式，只针对-webkit
-moz浏览器内核来讲，所以必然不考虑IE的兼容性问题；
如果想使用这种方式来自定义单选框与复选框样式，请尽量在移动端中使用；毕竟pc端有万恶的IE
在开发过程中，浏览器原始的单选框和复选框的样式确实有点丑陋，为了满足设计稿的样式，有时候我们不得不去做一些模拟复选框和单选框的形式，但是这样未免又多增加了一些DOM结构，这并不是我们正真想要的；

废话不多说，上代码；

单选框（radio）自定义样式

//html<input type="radio" />

//css部分
<style>
/** * 单选框自定义样式 **/ 
input[type=radio]{
   /*去除浏览器默认样式*/   
   -webkit-appearance: none;
   -moz-appearance: none;        
   appearance: none;        
   /*自定义样式*/  
    position: relative;        
   display: inline-block;        
   vertical-align: top;        
   width: 20px;        
   height: 20px;        
   border: 1px solid #00bfff;        
   outline: none;        
   cursor: pointer;        
   /*设置为圆形，看起来是个单选框*/ 
   -webkit-border-radius: 20px;        
   -moz-border-radius: 20px;        
   border-radius: 20px;    
}
/** * 单选框 选中之后的样式 **/
input[type=radio]:after{
   content: '';        
   position: absolute;        
   width: 12px;        
   height: 12px;        
   display: block;        
   left: 0;        
   top: 0;        
   right: 0;        
   bottom: 0;