select下拉列表的样式代码,Css代码库,德仔网

代码语言

代码分类

【Css】 select下拉列表的样式

作者:倪闯 / 发布于2015/4/2/ 641


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

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　select　　下拉列表　

同语言下

可能有用的

倪闯贡献的其它代码(4)