简单重写类型为radio的input元素

2019独角兽企业重金招聘Python工程师标准>>>

radio类型

很容易理解有选中前的样式和选中后的样式，选中前的样式很好选择，选中后的样式可以用:check这个伪类选择器选中。（多浏览器支持我还没完全掌握，目前只用webkit内核浏览器来说） 
然后先用-webkit-appearance:none;关闭浏览器自带样式，然后要做成选中前是一个空心圆，选中后是一个中间有个实心点的圆。（可以理解为在谷歌浏览器上自带的radio样式） 

空心圆可以使用圆角+背景色+阴影来表示：

<代入你的选择器>{
    -webkit-appearance:none;
    height: 13px;
    width: 13px;
    background-color: rgb(227,227,227);
    box-shadow: 0 0 1px rgb(104,104,104);
    border-radius: 10px;
    outline: none;/*似乎谷歌浏览器还有一个蓝色的outline影响，于是去掉*/
} 

从样式可以看出来这个空心圆的直径是13px，阴影是1px，内部空心是5.5px。（然而查看控制台并不是这样的，我也不知道为何…） 
于是乎，选中后的圆应该也不能超过这个尺寸，而且深色圆点作为选中的圆点，厚border作为空心部分，最外层就要用到box-shadow属性来保证跟未选中时近似。

<代入你的选择器>:checked{
    background-color: rgb(104,104,104);
    border: 3px solid rgb(227,227,227);
    box-shadow: 0 0 1px rgb(104,104,104);
}

 

转载于:https://my.oschina.net/yanyaya/blog/800054