仅使用 css 样式选择下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18081751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling select dropdown with css only
提问by VoVaVc
I were searching the web for almost two hours and haven't found even a single example of css styling select dropdown. Most of all I was interested in z-index to show select dropdown under absolute div block. The only thing was founded is styling offsets, background-color and font, but what about other css properties? Searching for webkit shadow dom also gave no result. Really this is not possible? :(
我在网上搜索了将近两个小时，甚至没有找到一个 css 样式选择下拉列表的示例。最重要的是，我对 z-index 感兴趣，以在绝对 div 块下显示选择下拉列表。唯一成立的是样式偏移、背景颜色和字体，但是其他 css 属性呢？搜索 webkit shadow dom 也没有结果。这真的不可能吗？:(
回答by Arbaoui Mehdi
Styling Select Box with CSS3:
使用 CSS3 样式选择框：
HTML:
HTML：
<label>
<select>
<option selected> Select Box </option>
<option>Short Option</option>
<option>This Is A Longer Option</option>
</select>
</label>?
CSS:
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;
}
回答by Akki619
Here is the code.
这是代码。
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;
}
Please go through this fiddle
请通过这个小提琴
回答by Umarfaruk M
This will help you to style the select tag. http://www.bulgaria-web-developers.com/projects/javascript/selectbox/
这将帮助您设置选择标签的样式。http://www.bulgaria-web-developers.com/projects/javascript/selectbox/
