一、背景介绍

下拉列表由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表单中每出现一次，一个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;

}

hello girl

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}

苹果

李子

四、扩展思考

1、checkbox怎么修改默认样式？

参考文献：

1、http://uplifted.net/programming/change-default-select-dropdown-style-just-css

2、https://fatesinger.com/74438