border-radius属性是CSS3提供的,如果按照下面代码设置还是不行,你就要看看是不是你浏览器版本太低,建议使用新版本谷歌和火狐浏览器测试
<option value="0" style="border: 1px solid #000width: 100pxborder-radius:5px">苹果</option>
这个可以换种方式实现,首先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辅助)。
<div class="selectbox"><select>
<option>默认值</option>
<option>选项之</option>
</select>
</div>
css代码:
.selectbox{ width: 200px display: inline-block overflow-x: hidden height: 28px line-height: 28px font-size: 0 background:#fff url(images/selectbg.png) right center no-repeat border: 1px solid #dcdbdb vertical-align: middle}.selectbox select{cursor: pointer padding: 0 8px height: 28px line-height: 28px font-size: 12px width:118% padding-right: 18% background:none border: none}
.selectbox select option{ padding:5px}
1..selectbox select 有个padding-right:18%; 和宽度100%+18% 的意思是故意超出selectbox的。
2.这个超出部分刚好能把后面的默认下拉按键隐藏掉,同时设置.selectbox的背景为下拉小按钮,居右边垂直居中。
3.之所以用百分比(18%),没有用固定值设置超出,是因为外层的selectbox只要定宽就不必考虑内层的select的宽度和padding样式值,很利于设置不同的宽度值,这里只需要设置selectbox的宽度,内层的select控件就自动获得宽度并超出。
最终效果如下:
selectbg.png背景图片如下: