如何修改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>