自己修改select的样式（修改select右边的小三角）

最新推荐文章于 2022-09-29 18:18:35 发布

p312011150

最新推荐文章于 2022-09-29 18:18:35 发布

阅读量2.3k

点赞数

分类专栏： css html

css 同时被 2 个专栏收录

48 篇文章 2 订阅

订阅专栏

html

25 篇文章 0 订阅

订阅专栏

select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: solid 1px #000;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

本方法只修改下拉框样式，不修改option样式，修改后的样式：

思路：
1.先去掉select本身原有的样式。
2.用一个元素（div/lebal等）作为select的父元素。
3.在select父元素后面用：after做一个新的样式。

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ADVANCED CSS3 STYLING OF SELECT ELEMENT (DROP-DOWN)</title>
        <style type="text/css">

            /* SELECT W/IMAGE */
            select#selectTravelCity
            {
               width                    : 14em;
               height                   : 3.2em;
               padding                  : 0.2em 0.4em 0.2em 0.4em;
               vertical-align           : middle;
               border                   : 1px solid #94c1e7;
               -moz-border-radius       : 0.2em;
               -webkit-border-radius    : 0.2em;
               border-radius            : 0.2em;
               -webkit-appearance       : none;
               -moz-appearance          : none;
               appearance               : none;
               background               : #ffffff;
               font-family              : SimHei;
               font-size                : 1.1em;
               color                    : RGBA(102,102,102,0.7);
               cursor                   : pointer;
            }

            /*SELECT W/DOWN-ARROW*/
            select#selectPointOfInterest
            {
               width                    : 185pt;
               height                   : 40pt;
               line-height              : 40pt;
               padding-right            : 20pt;
               text-indent              : 4pt;
               text-align               : left;
               vertical-align           : middle;
               border                   : 1px solid #94c1e7;
               -moz-border-radius       : 6px;
               -webkit-border-radius    : 6px;
               border-radius            : 6px;
               -webkit-appearance       : none;
               -moz-appearance          : none;
               appearance               : none;
               font-family              : SimHei;
               font-size                : 18pt;
               font-weight              : 500;
               color                    : RGBA(102,102,102,0.7);
               cursor                   : pointer;
               outline                  : none;
            }


            /*LABEL FOR SELECT*/
            label#lblSelect{ position: relative; display: inline-block;}


            /*DOWNWARD ARROW (25bc)*/
            label#lblSelect::after
            {
                content                 : "\25bc";
                position                : absolute;
                top                     : 0;
                right                   : 0;
                bottom                  : 0;
                width                   : 20pt;
                line-height             : 40pt;
                vertical-align          : middle;
                text-align              : center;
                background              : #94c1e7;
                color                   : #2984ce;
               -moz-border-radius       : 0 6px 6px 0;
               -webkit-border-radius    : 0 6px 6px 0;
                border-radius           : 0 6px 6px 0;
                pointer-events          : none;
            }
        </style>
    </head>

    <body>
        <br />
        <select id="selectTravelCity" title="Select Travel Destination">
            <option>去掉select原有样式</option>
            <option>Washington DC</option>
            <option>Los Angeles</option>
            <option>Chicago</option>
            <option>Houston</option>
            <option>Philadelphia</option>
            <option>Phoenix</option>
        </select>
        <br />
        <br />

        <label id="lblSelect">
            <select id="selectPointOfInterest" title="Select points of interest nearby">
                <option>补充新的样式</option>
                <option>food beverage</option>
                <option>restaurant</option>
                <option>shopping</option>
                <option>taxi limo</option>
                <option>theatre</option>
                <option>museum</option>
                <option>computers</option>
            </select>
        </label>
</body>
</html>
  
  1
2
3
4
5
6
7
8
9
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

补充（2017-4-28）

还有一种方法是先去除浏览器默认的样式，然后把一个箭头的背景图片定位到右边，这里有代码示例：
http://jsbin.com/gexiwenave/edit?html,css,output，这种方法比较简单。

p312011150

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己修改select的样式（修改select右边的小三角）

select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none;
复制链接

扫一扫