Html 添加向下箭头以选择下拉
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22997995/
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
Adding a Down Arrow to Select Drop Down
提问by joetinger
Hello I'm creating an MVC Razor site and I currently have a styled drop down box, Here is the jsfiddle. I can't figure out how to add a down arrow. Any ideas? I've tried thisbut it didn't work for me. Here is my current code
您好，我正在创建一个 MVC Razor 站点，我目前有一个样式化的下拉框，这是 jsfiddle。我不知道如何添加向下箭头。有任何想法吗？我试过这个，但它对我不起作用。这是我当前的代码
HTML
HTML
<div class="dropdown">
<select>
<option>Option One </option>
<option>Option Two </option>
<option>Option Three </option>
</select>
</div>
CSS
CSS
.dropdown select{
background:transparent;
width: 297px;
padding: 2px;
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
font-weight:600;
color:#fff;
line-height: 1;
border: 0;
border-radius: 0;
/*Hides the default arrows for Selects*/
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
.dropdown{
width: 297px;
overflow: hidden;
background: no-repeat right #363636;
border-top:#575757 1px solid;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 8px 3px -9px #000000;
-webkit-box-shadow: 0px 8px 3px -9px #000000;
box-shadow: 0px 8px 3px -9px #000000;
}
select > option {
background: #D3D3D3;
color: black;
回答by Vangel Tzo
You could create this triangle via css and pseudo elements
您可以通过 css 和伪元素创建这个三角形
.dropdown {
position: relative;
}
.dropdown:before {
content: "";
position: absolute;
right: 10px;
top: 8px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #f00;
}
.dropdown:after {
content: "";
position: absolute;
right: 10px;
top: 3px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}
Here is a demo : http://jsfiddle.net/S3h27/363/
这是一个演示：http: //jsfiddle.net/S3h27/363/
