巧用css美化select下拉列表 更换下拉箭头
id="QIHOO_UNION_1444458779608" src="http://api.so.lianmeng.360.cn/searchthrow/api/ads/throw?ls=s0584f89e7f&w=780&h=90&inject=1&pos=0&rurl=http%3A%2F%2Fwww.16css.com%2Fdivcss%2Fcycss%2F922.html&pn=0&prt=1444458779608&tit=%E5%B7%A7%E7%94%A8css%E7%BE%8E%E5%8C%96select%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8%20%E6%9B%B4%E6%8D%A2%E4%B8%8B%E6%8B%89%E7%AE%AD%E5%A4%B4_%E5%B8%B8%E7%94%A8CSS%E6%8A%80%E5%B7%A7_DIV%2BCSS%E6%95%99%E7%A8%8B_%E4%B8%80%E6%B5%81%E8%B5%84%E6%BA%90%E7%BD%91&pt=1444458779608&cw=1600&jv=1437124819535&inlay=0&link=21&hao360=50&rank=18&t=2&n=21" width="780" height="90" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" align="center,center" allowtransparency="true" style="display: block;">
使用默认的select下拉列表,右边的下拉箭头比较难看,我们可以用如下方法解决。
原 理是在select外层加入2个span,首先设置第一个span,其width大于select的width,在这个span的背景加入我们想要的下拉 箭头样式,然后再加第二个span,其width小于select的width,关键设置好它的overflow的宽度,隐藏select的下拉箭头。
优点是设置简单,缺点是若无javascript模拟鼠标点击则下拉箭头仅能起到装饰作用。
想要求漂亮而且代码的少的话,可以使用本方法。
使用到的图片:
1
2
3
|
.select {
width
:
80px
;
height
:
24px
;
background
:
none
;
border
:
none
; }
#sleHid {
display
:
block
;
width
:
56px
;
overflow
:
hidden
; }
#sleBG {
width
:
78px
;
height
:
24px
;
border
:
#61AC36
1px
solid
;
border-right
:
none
;
background
:
url
(
"../images/common/selArr.jpg"
)
#fff
no-repeat
62px
1px
;
display
:
block
;}
|
XML/HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<
div
>
<
form
>
<
span
id
=
"sleBG"
>
<
span
id
=
"sleHid"
>
<
select
name
=
"type"
class
=
"select"
>
<
option
selected
=
"selected"
>所有分类</
option
>
<
option
value
=
"1"
>图书</
option
>
<
option
value
=
"2"
>音像</
option
>
</
select
>
</
span
>
</
span
>
</
form
>
</
div
>
|