选择框中的下拉箭头未显示答案

【问题标题】：Drop down arrow in select boxes not showing选择框中的下拉箭头未显示
【发布时间】：2015-10-03 17:05:24
【问题描述】：

我使用的是 wordpress 主题，由于某种原因，HTML select 框没有下拉区域。它们看起来就像普通的 input 文本框，尽管当您单击它们时，您可以看到下拉列表。我找不到什么代码可能会去掉下拉箭头。

这就是我在 CSS 中看到的全部内容：

input:focus {
outline: none;
}

select,
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius:0; 
border-radius:0; 
}

【问题讨论】：

如果您使用检查工具，您可以打开和关闭应用于元素的样式并确定它是哪一个...因此，在 chrome 中，右键单击元素并选择“检查元素”。
谢谢。我没有看到任何与它相关的东西。选择箭头是否有归属？我想知道我应该寻找什么代码来控制选择箭头。
摆脱webkit-appearance: none;
那里只有四个规则。发现select { -webkit-appearance: none; } 是问题的原因并不需要太多努力。改为select { -webkit-appearance: menu; }。
实际上这是我需要摆脱的边界半径，但这成功了。谢谢！

标签： html css wordpress drop-down-menu

【解决方案1】：

我知道我回答得这么晚了，但它对我有用，而且可能对某人也有帮助。只需传递这个 CSS。

select{
-webkit-appearance: listbox !important
}

【讨论】：

考虑将此作为评论或改进您的答案。请阅读stackoverflow.com/help/how-to-answer了解更多信息

【解决方案2】：

我也遇到同样的问题，添加下面的 jquery 文件 jquery-3.4.1.js 后出现下拉箭头

<script type="text/javascript" src="~/Scripts/jquery-3.4.1.js">

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

我已经尝试了上述解决方案，但它不适用于使用 jquery.min.css 创建的 UI。我在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;
}

【讨论】：

【解决方案5】：

您可以将select 包装在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;
}

【讨论】：

【解决方案6】：

这是一个基本的选择

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

现在让我们看看你的问题在哪里：

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>

因此，当您将 none 设置为 appearance 时，您将删除箭头（默认为 menulist），而当您将 0 设置为 border-radius 时，您将删除 border select 的默认值。

注意如果您使用此规则在 IE 中隐藏了箭头 select::-ms-expand { display: none; } 以使箭头返回，则需要将其设置为 display:block

【讨论】：

menulist 啊，谢谢。我找不到如何将其添加回来。一旦我无法控制 css 样式表将此属性设置为无，我需要一种方法将其设置回来。
谢谢兄弟，正在尝试找出问题所在。上帝保佑

【解决方案7】：

答案对大多数人来说是正确的，但对我不起作用。这成功了

select::-ms-expand { display: block; }

【讨论】：

【解决方案8】：

您已覆盖select 的-webkit-appearance 属性，浏览器将其设置为-webkit-appearance: menulist; 作为默认值。

【讨论】：