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

Question

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

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

input:focus {
outline: none;
}

select,
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius:0; 
border-radius: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>

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

您可以通过将appearence设置为menulist(默认值)、listbox或auto来恢复箭头>

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