仅使用CSS设计选择下拉菜单
这个问题在这里已经有了答案：
使用CSS3设计选择框：
HTML：
<label>
<select>
<option selected> Select Box </option>
<option>Short Option</option>
<option>This Is A Longer Option</option>
</select>
</label>
CSS：
body, html {
background:#444;
text-align:center;
padding:50px 0;
}
select {
padding:3px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
background: #f8f8f8;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}
label {position:relative}
label:after {
content:'<>';
font:11px "Consolas", monospace;
color:#aaa;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:8px; top:2px;
padding:0 0 2px;
border-bottom:1px solid #ddd;
position:absolute;
pointer-events:none;
}
label:before {
content:'';
right:6px; top:0px;
width:20px; height:20px;
background:#f8f8f8;
position:absolute;
pointer-events:none;
display:block;
}
演示：http://cssdeck.com/labs/styling-select-box-with-css3
这是代码。
body {
margin-top:20px;
margin-left:20px;
}
select {
padding:9px;
margin: 0;
border-radius:4px;
-webkit-box-shadow:
0 0px 0 #ccc,
0 0px #fff inset;
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
color:black;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
cursor:pointer;
border: 1px solid #ccc;
}
请通过这个小提琴
这将帮助您设计选择标签的样式。 http://www.bulgaria-web-developers.com/projects/javascript/selectbox/
链接地址: http://www.djcxy.com/p/41583.html