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

Question

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

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

 input:focus {
outline: none;
}

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

原文由 JA4677 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个基本的选择

 <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>

So when you set none to appearance you are removing the arrow, and when you are setting 0 to border-radius , you are removing the border 默认为 select 。

您可以通过设置 appearence menulist listbox auto

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

原文由 dippas 发布，翻译遵循 CC BY-SA 4.0 许可协议