这里是修真院前端小课堂，本篇分析的主题是
【 如何修改radio，input元素默认样式】
一、背景介绍
下拉列表由select标签实现，单选按钮由表单元素input的type属性radio定义。以下分别是一个简单的下拉列表和单选按钮。
二、知识剖析
1、form元素
form元素定义HTML表单,HTML表单是一个包含表单元素的区域。HTML表单包含表单元素。而表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等。input元素是最重要的表单元素。表单元素是允许用户在表单中输入内容。input元素有很多形态，有不同的type属性，而radio是其中一个属性，用于定义单选按钮。
2、radio
input元素在form元素中使用，用来声明允许用户输入数据的input控件。输入类型是由类型属性（type）定义的，输入类型至少包含23种，大多数经常被用到的输入类型如下：text（文本输入）、password（密码输入）、submit（提交按钮）、button（按钮）、image（图像作为提交按钮）以及checkbox（复选框）和radio（单选按钮）。Radio对象代表HTML表单中的单选按钮。在HTML表单中<input type="radio">每出现一次，一个Radio对象就会被创建。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。
3、label
label标签为input元素定义标注（标记）。label元素不会向用户呈现任何特殊效果。"for"属性可把label绑到另外一个元素。只需把"for"属性的值设置为相关元素的id属性的值。给raido和后面的文字外面加个label标签的，这样的话点文字就能选上radio,改善用户体验。如果label标签包含一个input元素，那么点击label标签内容就可以选中input标签，改变radio默认样式也是基于这个原理。
4、select
select标签用来创建下拉列表。select标签中的option标签定义了列表中的可用选项。select元素用来创建下拉列表,是一种表单控件，可用于在表单中接受用户输入,select元素通过option标签定义列表中的可用选项，也就是下拉菜单选项。
三、常见问题
如何修改radio和select的默认样式：
下拉列表和单选按钮,有原始的默认样式，有时候为了美观，这些样式并不能达到我们的要求。因此需要更改样式，达到设计要求。一般的方法是使用css进行清除覆盖原有默认样式，然后添加我们想要的样式。
1、修改select默认样式
使用appearance改变下拉列表的原有默认属性，将原有默认属性清除，在重新编写样式。webkit-appearance属性是一个可以改变按钮和其他控件的外观的属性，使其类似于原生控件。-webkit-appearance是一个 不规范的属性（unsupported WebKit property），它没有出现在CSS规范草案中。此属性非标准且渲染效果在不同浏览器下不同，有些属性值不支持，所以使用时要慎用。所有主流浏览器都不支持appearance属性。Firefox支持替代的-moz-appearance属性。Safari和Chrome支持替代的-webkit-appearance属性。
select{
-moz-appearance:none;-webkit-appearance:none;border:none;margin:20px;width:100px;height:30px;padding-left:10px;padding-right:25px;color:white;background:url("../img/css-10-radio-select/rose.png")no-repeat75px#3b3b3b;
}
<input>
<option value="hello girl">hello girl</option>
</imput>
2、修改radio默认样式
修改radio 默认样式原理主要是使用label标签将input标签包裹，里面再放一个inline-block标签。将input标签隐藏，使用inline-block标签样式代替input标签。要使用到：checked 伪类和：after 伪类。
.test-label{margin:20px20px0 0;display:inline-block}
.test-radio{display:none}
.test-radioInput{background-color:#fff;border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top: -1px;vertical-align:middle;width:16px;line-height:1}
.test-radio:checked+ .test-radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}
<labelclass="test-label">
<inputclass="test-radio"type="radio"name="radio">
<spanclass="test-radioInput"></span>苹果
</lable>
<labelclass="test-label">
<inputclass="test-radio"type="radio"name="radio">
<span class="test-radioInput"></span>李子
</lable>
四、扩展思考
1、checkbox怎么修改默认样式？
五、参考文献：
1、http://uplifted.net/programming/change-default-select-dropdown-style-just-css
2、https://fatesinger.com/74438
作者：你隔壁的陌生人
链接：https://www.jianshu.com/p/0307febc0d85
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
【更多内容，可以加入IT交流群565734203与大家一起讨论交流】
【这里是技能树·IT修真院：IT修真院官网，初学者转行到互联网的聚集地】