Html CSS - 将下拉箭头更改为 unicode 三角形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31531865/
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
CSS - change dropdown arrow to unicode triangle
提问by Suika
I've customized my <select>using like this:
我已经<select>像这样自定义了我的使用：
background-color:#ececec;
border:0;
border:1px solid #e3e3e3;
border-radius:3px;
width:100%;
font-family:'FuturaStdLightOblique', sans-serif;
font-size:16px;
color:#616263;
outline:none;
height: 40px;
But I also want to change my dropdown arrow into a look that fits this design. I would like to use the unicode triangle ▼ (▼) as an alternative to the arrow down and if possible, set it to the same color as the texts in my select tag.
但我也想将我的下拉箭头更改为适合此设计的外观。我想使用 unicode 三角形 ▼ ( ▼) 作为向下箭头的替代，如果可能，将其设置为与我的选择标签中的文本相同的颜色。
Any ideas on how I can achieve this without using anything aside from CSS/HTML? Thanks in advance.
关于如何在不使用 CSS/HTML 之外的任何东西的情况下实现这一目标的任何想法？提前致谢。
回答by Dmitriy
maybe so?
可能是吧？
*,
*:before,
*:after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
form {
padding: 1rem;
max-width: 400px;
margin: 1em auto;
}
.select {
height: 40px;
width: 100%;
overflow: hidden;
position: relative;
border-radius: 3px;
margin-bottom: 1em;
}
.select:after {
content: "▼";
padding: 12px 8px;
position: absolute;
right: 10px;
top: 0;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
}
.select__field {
height: 40px;
width: 100%;
padding: 5px 15px;
color: #616263;
background-color: #ececec;
border: 1px solid #e3e3e3;
outline: none;
font-size: 16px;
-webkit-appearance: none;
/* for webkit browsers */
-moz-appearance: none;
/* for firefox */
appearance: none;
/* for modern browsers */
}
/* remove default caret for ie */
.select__field::-ms-expand {
display: none;
}
.select__field:focus:invalid {
border-color: #FD6347;
}
.select__field:required:valid {
border-color: #006400;
}
.btn-submit {
color: #fff;
display: block;
padding: 15px;
text-transform: uppercase;
background: #535C69;
width: 100%;
border: none;
border-radius: 3px;
}<form action="#" method="post">
<div class="select">
<select name="nameValueSelect" class="select__field" required>
<option value="" selected>Choose option ...</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
</div>
<button type="submit" class="btn-submit">Submit</button>
</form>