默认的select下拉框，样子丑，并且在各个浏览器的样子还不一样。所以需要美化。当然，要完全兼容的话，改起来会很费事，这时就建议你自己模拟了，或找相关插件。比如jquery插件啊，js插件等等. 这里主要介绍默认下拉框美化方法。
思路：
重置select 默认下拉框样式，用自定义的图片覆盖默认下拉三角按钮。如果低版本ie9以下的话，建议套个外层div（overflow-x: hiddden），让select超出外层宽度隐藏。
关键代码：
dom结构：
<div class="button custom-select">
<select>
<option value="选择1" selected="selected">Connecticut</option>
<option value="选择2">New York</option>
<option value="选择3">Maryland</option>
<option value="选择4">Virginia</option>
</select>
</div>
css：
select{
border: solid 1px #ccc;
appearance: none;/*清除select下拉框默认样式*/
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 14px;/*为下拉小箭头留出一点位置，避免被文字覆盖*/
background: url("img/arrow.png") no-repeat scroll right center transparent;/*自定义图片覆盖原有的下三角符号*/
}
select::-ms-expand {
display: none;/*清除IE默认下拉按钮，但是测试发现IE10以上有效，IE8，9默认下拉按钮仍旧存在*/
}
（2020.3.20）优化更新
- 简单自定义select的样式，更少代码，更优体验。
- 适用场景：移动端简单的h5页面，微信公众号类，扫码录入信息等等。
- 优点：代码少，无需引入三方ui库，体验还算可以。
-
用到的图片：
icon-select-arrow.png
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>select自定义样式</title>
<style type="text/css">
/*自定义下拉框样式*/
select{
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
cursor: pointer;
}
/*清楚IE选择框的默认样式，隐藏下拉箭头*/
select::-ms-expand {
display: none;
}
select.select-custom{
border: none;
outline: none;
background: transparent url(img/icon-select-arrow.png) no-repeat right center;
padding-right: 1.1em;
background-size: 0.8em 0.6em;
font-size: 16px;
line-height: 1.5;
}
select.select-custom option:hover{
background-color: #f00;
}
.select-custom-wrap{
display: inline-block;
padding: 0 4px;
border: 1px solid #848484;
}
</style>
</head>
<body>
<div class="select-custom-wrap">
<select class="select-custom">
<option value="1">谷歌浏览器</option>
<option value="2">火狐浏览器</option>
<option value="3">Opera浏览器</option>
<option value="4">IE浏览器</option>
</select>
</div>
</body>
</html>
-
效果图：
主流浏览器效果.png option选项弹出框的效果：PC端浏览器效果插件不大，移动端，
iOS系统是滚动选择类，Android系统是弹出框选择类。
