这个可以换种方式实现，首先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select里面的样式诸如箭头，下拉框等等的样式，这里提供一种思路，就是在select的外层添加一个div，对这个div元素设置样式，select元素则是没样式，从而达到一种掩眼法的效果，实现方式如下：
<!-- html 布局 --><div id="selectStyle">
<select id="select">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</div>
首先要去掉 #select 的默认样式：
/* 去掉默认样式，设置新的样式 */#select{
display:block
width:100%
height:100%
box-sizing:border-box
background:none
border:1px solid #222
outline:none
-webkit-appearance:none
padding:0 5px
line-height:inherit
color:inherit
cursor:default
font-size:14px
position:relative
z-index:3
}
#select option{
color:#222
}
#select option:hover{
color:#fff
}
#select option:checked{
background:#535353
color:#fff
}
然后在外层div#selectStyle设置自定义样式
#selectStyle{display:block
margin:0 auto
overflow:hidden
height:30px
width:240px
border-radius:0
background:#535353 url("箭头图片地址") right center no-repeat
background-size:auto 80%
color:#fff
line-height:2
/* 如果不想加图片，
则可以设置一个自己的三角形样式，
如下的自定义方式，
见代码1 */
position:relative
z-index:1
}
/* 代码1 */
#selectStyle:before{
position:absolute
z-index:1
top:50%
right:10px
margin-top:-2.5px
display:block
width:0
height:0
border-style:solid
border-width:5px 5px 0 5px
border-color:#fff transparent transparent transparent
content:""
}
/* 代码1 */
#selectStyle:after{
position:absolute
z-index:1
top:50%
right:10px
margin-top:-3.5px
display:block
width:0
height:0
border-style:solid
border-width:5px 5px 0 5px
border-color:#535353 transparent transparent transparent
content:""
}
以上就是自定义select样式的方法；
同时也可以完全不要select这个元素使用div+css来自定义一个跟select一样效果的下拉框（需要Javascript辅助）。
为了达到更好的交互效果，提高用户友好度，对文本框输入框之类的美化工作是很必要的。一般的美化工作可以直接通过使用CSS完成，方法也十分简单，如下：1、首先制作一张输入框的背景图，如上图所示。2、添加按钮的Html代码：<input type=button class=Selectbg3、然后用css代码将它定义：<stylebody{font-size:12px }.Selectbg{border:nonewidth:150px height:20px background-image:url(image.gif) text-align:leftline-height:20px }</style在写CSS代码的时候要注意，如果背景图中带边框，一定要将输入框的边框去掉，否则会显示默认边框；其次还要将高度和行高定义好，否则点击输入框后文字的位置会很难看。
