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

1. [图片] Styling_SELECT.jpg   


2. [代码]test.html

<! 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 >

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值