CSS3 中关于 select 下拉列表的样式

最新推荐文章于 2024-07-29 12:13:58 发布
最新推荐文章于 2024-07-29 12:13:58 发布
阅读量5.8k 收藏 3
点赞数
分类专栏： IT-前端框架

http://www.oschina.net/code/snippet_12_46548


代码片段(2)[全屏查看所有代码]

1. [图片] Styling_SELECT.jpg    

2. [代码]test.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<! 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 #e9e9e9;
                -moz-border-radius       : 0.2em;
                -webkit-border-radius    : 0.2em;
                border-radius            : 0.2em;
                box-shadow               : inset 0 0 3px #a0a0a0;
                -webkit-appearance       : none;
                -moz-appearance          : none;
                appearance               : none;
                /* sample image from the webinfocentral.com */
                background               : url(http://webinfocentral.com/Images/favicon.ico) 95% / 10% no-repeat #fdfdfd;
                font-family              : Arial,  Calibri, Tahoma, Verdana;
                font-size                : 1.1em;
                color                    : #000099;
                cursor                   : pointer;
             }
             select#selectTravelCity  option
             {
                 font-size               : 1em;
                 padding                 : 0.2em 0.4em 0.2em 0.4em;
             }
             select#selectTravelCity  option[selected]{ font-weight:bold}
             select#selectTravelCity  option:nth-child(even) { background-color:#f5f5f5; }
             select#selectTravelCity:hover
             {
                 color                   : #101010;
                 border                  : 1px solid #cdcdcd;
             }   
             select#selectTravelCity:focus {box-shadow: 0 0 2px 1px #404040;}
 
             /*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;
                box-shadow               : inset 0 0 3px #606060;
                border                   : 1px solid #acacac;
                -moz-border-radius       : 6px;
                -webkit-border-radius    : 6px;
                border-radius            : 6px;
                -webkit-appearance       : none;
                -moz-appearance          : none;
                appearance               : none;
                font-family              : Arial,  Calibri, Tahoma, Verdana;
                font-size                : 18pt;
                font-weight              : 500;
                color                    : #000099;
                cursor                   : pointer;
                outline                  : none;
             }
             select#selectPointOfInterest option
             {
                 padding             : 4px 10px 4px 10px;
                 font-size           : 11pt;
                 font-weight         : normal;
             }
             select#selectPointOfInterest option[selected]{ font-weight:bold}
             select#selectPointOfInterest option:nth-child(even) { background-color:#f5f5f5; }
             select#selectPointOfInterest:hover {font-weight: 700;}
             select#selectPointOfInterest:focus {box-shadow: inset 0 0 5px #000099; font-weight: 600;}
 
             /*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              : #000099;
                 color                   : #fefefe;
                -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 >New York City</ option >
             < option >Washington DC</ option >
             < option >Los Angeles</ option >
             < option >Chicago</ option >
             < option >Houston</ option >
             < option >Philadelphia</ option >
             < option >Phoenix</ option >
             < option >San Antonio</ option >
             < option >San Diego</ option >
             < option >Dallas</ option >
             < option >San Jose</ option >
             < option >Austin</ option >
         </ select >
         < br />
         < br />
 
         < label id = "lblSelect" >
             < select id = "selectPointOfInterest" title = "Select points of interest nearby" >
                 < option >caffe</ 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 >

LarryHai6
关注
专栏目录
css怎么设置select下拉选项按钮,如何仅使用CSS设置 <select> 下拉列表的样式？
weixin_29156679的博客
08-03 4089
这是三个解决方案：解决方案＃1-外观：无-使用Internet Explorer 10-11解决方法要隐藏在appearance: none选择元素上设置的默认箭头，然后使用以下命令添加您自己的自定义箭头background-imageselect {-webkit-appearance: none;-moz-appearance: none;appearance: none; /* ...
jquery+css3美化select下拉列表框特效
08-05
在网页设计中，"jquery+css3美化select下拉列表框特效"是一个常见的需求，它旨在提升用户体验，使传统的HTML `<select>` 元素看起来更加现代和吸引人。本项目结合了JavaScript库jQuery和CSS3的新特性，为下拉列表框...
用纯css改变下拉列表select框的默认样式，兼容所有浏览器
qq_41974582的博客
08-31 1436
用纯css改变下拉列表select框的默认样式，兼容所有浏览器
CSS自定义select下拉选择框的样式(不用其他标签模拟)
02-01
怎么自定义select下拉选择框的样式，使用纯CSS实现，把浏览器默认的样式覆盖掉还是有其他的方法，select靠纯CSS是不能解决这个自定义样式问题，下面为大家讲解下CSS实现的思路
前端 `select` 标签如何创建下拉菜单？
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-29 779
本文详细介绍了如何使用标签来创建下拉菜单，包括基本概念、代码示例以及一些高级用法和技巧。通过上述示例和讲解，你应该能够更好地理解和掌握元素的使用方法，并将其应用到实际项目中去。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，
+++用纯css改变下拉列表select框的默认样式+++
Larry的博客
03-24 6838
http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里，我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式。 问题的提出 事情是这样的，您的设计师团队向您发送一个新的PSD（Photoshop文档），它是一个新的网站的最终设计。 一切看
css 设置下拉列表 select 样式
03-16
NULL 博文链接：https://jiangpan.iteye.com/blog/419038
CSS怎么去掉select的下拉箭头样式
12-13
`select`元素就是其中一种常见的表单元素，用于创建下拉列表。然而，浏览器默认的`select`元素样式通常带有下拉箭头，这在某些情况下可能与我们的设计需求不符。本文将详细介绍如何通过CSS来去掉`select`元素的下拉...
jQuery和css3超赞select下拉列表框美化插件
12-11
**jQuery和CSS3超赞Select下拉列表框美化插件详解** 在网页设计中，Select元素通常是用来创建下拉选择菜单的，但其默认样式在许多浏览器中并不统一，有时显得较为简陋。为了提升用户体验和界面美观度，开发者经常...
html5+css3 select
03-04
html5+css3设计的select绚丽样式！
HTML5 SELECT元素的高级CSS3样式
04-04
适用于HTML5 SELECT元素和ASP.NET DropDownList控件的纯CSS3样式解决方案
纯CSS3表单SELECT下拉列表
07-09
纯CSS3表单SELECT下拉列表效果，可以在苹果，安卓使用，比安卓默认下拉列表好看多了
css3 select 美化
u013018357的博客
02-04 8677
主要针对右边的箭头进行优化，因为不同的浏览器默认的右边的箭头不一样，但是ie9不支持 appearance:none;，所以ie9以及以下版本就用js写一下，不优化，使用默认的样式 html页面代码：<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select>c
纯css3 select,CSS3 纯CSS跨浏览器SELECT选择框自定义设计
weixin_34082139的博客
08-03 370
CSS语言：CSSSCSS确定.select {position: relative;height: 47.5px;background: white;box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);}.select:after {content: '';position: absolute;top: 0;width: 0;height: 0;right: 10px...
css select 样式列表-----另一种样式列表
aizhao3648的博客
06-09 133
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> &l...
css select 下拉列表样式
06-08
其中，`appearance` 、`-webkit-appearance` 和 `-moz-appearance` 属性用于移除浏览器默认的下拉列表样式。 `background-image` 属性用于设置下拉列表右侧的箭头图标。你需要将 `path/to/arrow.png` 替换为你自己的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值