CSS：改变select、option标签的默认样式

CSS：select标签、option标签

select标签和option标签是自带有CSS样式的

1、用纯CSS方式去除默认的select标签样式

方法一：form select{
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
}
<form>
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
</select>
</form>

所有浏览器都不支持appearance属性
Firefox支持替代的-moz-appearance属性
Safari和Chrome支持替代的-weblit-appearance属性
方法二：IE浏览器不支持appearance属性
*{
margin:0;
padding:0;
}
#wrap{
width: 100px;
height: 30px;
overflow: hidden;
}
#wrap select {
width: 120px;
}
<div id="wrap">
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
</select>
</div>

可以在select框右边加上下拉图片
2、用纯CSS方式去除option的默认样式：本来想用纯CSS方式去除option的默认样式，但没有找到这种方法。

3、也可以用div、ul、li、等标签来创建select标签、option标签，这样可以定义自己想要的样式。