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

简直菜得扣脚

浏览器自己有一些诸如滚动条，文本框，输入框的特有样式，如果直接使用会根据不同浏览器造成不同的显示效果，所以会重写这些样式是很有必要的。

input元素

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);}

注意伪类选择器的样式要在后面，然后这样的样式还是和原生的有一点差距，圆的尺寸和一些细节，似乎有颜色渐变，这个我不会。不过有个点击效果还是可以强行模仿一下。

<代入你的选择器>:active{    background-color: rgb(219,219,219);}<代入你的选择器>:checked:active{    border: 3px solid rgb(219,219,219);}

请注意伪类选择器样式在样式表中的位置，这个涉及样式继承，不多说了（我也不全懂=.=#），正确的顺序应该是这样的：

<代入你的选择器>{}<代入你的选择器>:active{}<代入你的选择器>:checked{}<代入你的选择器>:checked:active{}

先到这里，以上