默认状态下的select下拉菜单简直是丑爆了，所以下面就介绍一下一个简单的方式对select下拉菜单进行美化，下面就是一段这样的代码实例，当然也不够美观，这里只是提供一种美化的思路，在实际应用中可以进行更为优秀的美化，代码如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html> <
html
>
<
head
>
<
meta
charset
=
" utf-8"
>
<
title
>蚂蚁部落</
title
>
<
style
type
=
"text/css"
>
.select{
margin-top:0px;
outline:none;
border:1px solid #BBBBBB;
border-radius:4px;
position:relative;
width:170px;
}
.text{
height:40px;
-webkit-appearance:none;
appearance:none;
border:none;
font-size:18px;
padding:0px 10px;
display:block;
width:100%;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background-color:#FFFFFF;
color:#333333;
border-radius:4px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"select"
>
<
select
class
=
"text"
>
<
option
>--选择科目--</
option
>
<
option
>css教程</
option
>
<
option
>div教程</
option
>
<
option
>javascript教程</
option
>
<
option
>jquery教程</
option
>
</
select
>
</
div
>
</
body
>
</
html
>
|
原文发布时间为：2017-2-18
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：select下拉菜单美化简单美化效果
