Html 选择框中的下拉箭头未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31417160/
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
Drop down arrow in select boxes not showing
提问by JA4677
I am using a wordpress theme and for some reason, the HTML selectboxes do not have the drop down area. They look like just plain inputtext boxes, although when you click on them, you can see the drop down list. I can't find what code might be stripping away the drop down arrows.
我使用的是 wordpress 主题，出于某种原因，HTMLselect框没有下拉区域。它们看起来只是纯input文本框，但当您单击它们时，您可以看到下拉列表。我找不到什么代码可能会剥离下拉箭头。
This is all I see in the CSS:
这就是我在 CSS 中看到的全部内容：
input:focus {
outline: none;
}
select,
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius:0;
border-radius:0;
}
回答by dippas
Here is a basic select
这是一个基本的选择
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>Now lets see where is your issue:
现在让我们看看你的问题在哪里：
select {
-webkit-appearance: none;
/*webkit browsers */
-moz-appearance: none;
/*Firefox */
appearance: none;
/* modern browsers */
border-radius: 0;
}<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>So when you set noneto appearanceyou are removing the arrow (which by default is menulist), and when you are setting 0to border-radius, you are removing the borderby default of the select.
因此，当您设置为时none，appearance您将删除箭头（默认情况下为menulist），而当您设置0为 时border-radius，您将在border默认情况下删除select.
NOTEIf you have hidden the arrow in IE with this rule select::-ms-expand { display: none; }to have the arrow back you would need to set it display:block
注意如果您使用此规则在 IE 中隐藏了箭头select::-ms-expand { display: none; }以使箭头返回，则需要设置它display:block
回答by dsaket
You have overridden the -webkit-appearanceproperty for select, which was set as -webkit-appearance: menulist;as default value by browsers.
您已经覆盖了 的-webkit-appearance属性select，该属性-webkit-appearance: menulist;被浏览器设置为默认值。
回答by fran
The answer is correct for most but didn't work for me. This did the trick
答案对大多数人来说是正确的，但对我不起作用。这成功了
select::-ms-expand { display: block; }
回答by Shubham Yadav
You can wrap the selectin a divand on that divyou can give ::afterelement and style:
您可以将selecta包裹起来，然后在其div上div提供::after元素和样式：
div:after{
position: absolute;
top: 4px;
right: 10px;
color: #768093;
font-family: #whichever font you wanna use# e.g Fontawesome;
font-size: 20px;
content: "\e842";
}
div:after{
position: absolute;
visibility: visible;
font-family: FontAwesome;
content: "\f096";
font-size: 18px;
}
回答by Smita
I was too getting the same issue, have got the drop down arrow after adding the below jquery file jquery-3.4.1.js
我也遇到了同样的问题，在添加下面的 jquery 文件 jquery-3.4.1.js 后得到了下拉箭头
<script type="text/javascript" src="~/Scripts/jquery-3.4.1.js">
回答by GSB
I have tried above solutions but it was not working for UI, which was created using jquery.min.css. I have tried below css and it resolved my issue. Here I am targeting .ui-icon-carat-d, which shown dropdown arrow and setting dropdown icon there:
我已经尝试了上述解决方案，但它不适用于使用jquery.min.css. 我试过下面的 css，它解决了我的问题。在这里，我的目标是.ui-icon-carat-d，其中显示了下拉箭头并在那里设置了下拉图标：
.ui-icon-carat-d:after{
background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important;
background-repeat: no-repeat !important;
background-color: #fff !important;
}
回答by Chandrajeet Shukla
select {
-webkit-appearance: none;
/*webkit browsers */
-moz-appearance: none;
/*Firefox */
appearance: none;
/* modern browsers */
border-radius: 0;
}<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>