<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浏览器中识别 */
.select>div {
width:120px
height: 17px
overflow:hidden
}
/* 通配选择符，只在IE浏览器中识别 */
* html .select div select {
display:block
float: left
margin: -2px
}
.select div>select {
display:block
width:124px
float:none
margin: -2px
padding: 0px
}
.select:hover {
border:1px solid #666666//鼠标移上的效果
}
.select select>option {
text-indent: 2px//option在FF等非IE浏览器缩进2px
}
-->
</style>
</head>
<body><div class="select">
<div>
<select>
<option>看见效果了吧</option>
<option>看见效果了吧</option>
<option>看见效果了吧</option>
</select>
</div>
</div>
你看看这段代码中对select的设置
1、css没有办法实现美化select下拉框的。不管怎么设定都没有用的2、可以通过div+css+jq自己模拟一款css
<div class="select">
<div class="select_default"></div> <!--这边是默认展示我们选中的框-->
<ul class="select_item"> <!--实则所有的下拉选项隐藏了，在这个ul中-->
<li>Complex</li>
<li>Knowledge</li>
<li>Case</li>
<li>Article</li>
<li>News</li>
</ul>
</div>
然后结合jq语法，实现点击出现下拉，点击下拉吧文本赋值到div里头
3、网络搜索下拉框美化插件。
css是无法去掉默认select的下拉箭头的，除非自己用div+js+css实现自定义select控件。
1、定义html中的select标签
<form>
<a class="btn-select" id="btn_select">
<span class="cur-select">请选择</span>
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
</select>
</a>
</form>
2、定义css样式：
* {
margin: 0
padding: 0
}
body {
padding: 50px 50px
}
.btn-select {
position: relative
display: inline-block
width: 150px
height: 25px
background-color: #f80
font: 14px/20px "Microsoft YaHei"
color: #fff
}
.btn-select .cur-select {
position: absolute
display: block
width: 150px
height: 25px
line-height: 25px
background: #f80 url(ico.png) no-repeat 125px center
text-indent: 10px
}
.btn-select:hover .cur-select {
background-color: #f90
}
.btn-select select {
position: absolute
top: 0
left: 0
width: 150px
height: 25px
opacity: 0
filter: alpha(opacity: 0)
font: 14px/20px "Microsoft YaHei"
color: #f80
}
.btn-select select option {
text-indent: 10px
}
.btn-select select option:hover {
background-color: #f80
color: #fff
}
3、定义点击事件JS：
var $$ = function (id) {
return document.getElementById(id)
}
window.onload = function () {
var btnSelect = $$("btn_select")
var curSelect = btnSelect.getElementsByTagName("span")[0]
var oSelect = btnSelect.getElementsByTagName("select")[0]
var aOption = btnSelect.getElementsByTagName("option")
oSelect.onchange = function () {
var text=oSelect.options[oSelect.selectedIndex].text
curSelect.innerHTML = text
}
}
4、最终效果：
