这个可以换种方式实现，首先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辅助）。
分类: 电脑/网络 >>程序设计 >>其他编程语言问题描述:
就像文本输入框<input>样式改变一样 我要改变的是<select><option></option></select>标签下拉框的样式 另外补充一点 我不要作成模拟下拉框 不要看且麻烦（除非你有很简单的模拟下拉框~HOHO~）谢谢大家！对不起，上次我问错了地方，现在只有这6分了
解析:
例一：
＜select name=select size="1" class="page_speeder_1165166956"＞
＜option value="2" selected＞yesky＜/option＞
＜option value="1"＞redidea＜/option＞
＜/select＞
查一下手册,还有好多项可以设置.
例二：
<>
<head>
<style>
.box
{
border: 1px solid #C0C0C0
width: 182px
height: 20px
clip: rect( 0px, 181px, 20px, 0px )
overflow: hidden
}
.box2
{
border: 1px solid #F4F4F4
width: 180px
height: 18px
clip: rect( 0px, 179px, 18px, 0px )
overflow: hidden
}
select
{
position: relative
left: -2px
top: -2px
width: 183px
line-height: 14pxcolor: #909993
border-style: none
border-width: 0px
}
</style>
</head>
<body>
<div class = box><div class = box2>
<select size = "1" name = "D1">
<option>内容一</option>
<option>内容二</option>
</select>
</div></div>
</body>
</>
