css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码:
成都地区优秀IDC服务器托管提供商(创新互联建站).为客户提供专业的托管服务器,四川各地服务器托管,托管服务器、多线服务器托管.托管咨询专线：18980820575
html
head
style
.div1{
width:600px;
height:200px;
font-size:13px;
}
.div select{
width:200px;
}
.div select option{
width:150px;
height:30px;
}
/head
body
div class='div1'
select
option value="volvo"Volvo/option
option value="saab"Saab/option
option value="opel"Opel/option
option value="audi"Audi/option
/select
/div
/body
/html
1、css没有办法实现美化select下拉框的。不管怎么设定都没有用的
2、可以通过div+css+jq自己模拟一款css
div class="select"
div class="select_default"/div !--这边是默认展示我们选中的框--
ul class="select_item" !--实则所有的下拉选项隐藏了，在这个ul中--
liComplex/li
liKnowledge/li
liCase/li
liArticle/li
liNews/li
/ul
/div
然后结合jq语法，实现点击出现下拉，点击下拉吧文本赋值到div里头
3、网络搜索下拉框美化插件。
默认是这样的，你想修改长度还是想解决什么问题。
如果是想修改长度，select style="width:设置你想要的长度"
这样就可以修改长度了
select的基本样式不好改变，以下例子仅供参考：
style type="text/css"
.select{
border:1px #7F9DB9 solid;
float: left;
display: inline;
margin-right:6px;
}
.select div{
border:0px #7F9DB9 solid;
float: left;
}
.selectdiv{
width:30px;
height: 17px;overflow:hidden;
/*clip:rect(0px 100px,17px,0px);*/
}
html代码：
select name="select"
option我是中国人/option
option我是河南人/option
option我是安阳人/option
/select
举个例子，照着做就可以了
style type="text/css"
!--
.select * {
margin: 0;
padding: 0;
}
.select {
border:1px solid #cccccc;
float: left;
display: inline;
}
.select div {
border:1px solid #f9f9f9;
float: left;
}
/* 子选择器，在FF等非IE浏览器中识别 */
.selectdiv {
width:120px;
height: 17px;
overflow:hidden;
}
/* 通配选择符，只在IE浏览器中识别 */
* html .select div select {
display:block;
float: left;
margin: -2px;
}
.select divselect {
display:block;
width:124px;
float:none;
margin: -2px;
padding: 0px;
}
.select:hover {
border:1px solid #666666; //鼠标移上的效果
}
.select selectoption {
text-indent: 2px; //option在FF等非IE浏览器缩进2px
}
--
/style
/head
bodydiv class="select"
div
select
option看见效果了吧/option
option看见效果了吧/option
option看见效果了吧/option
/select
/div
/div
你看看这段代码中对select的设置
select 的css有效的样式很有限，很多多是无效， color，font-size，font-family都能生效的
