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

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要删除的箭头(默认情况下为menulist),当你设置0到border-radius,要删除的border由默认select.

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

Answer 2

我知道我回答这个问题晚了，但我的以下 CSS 解决方案对我有用。

这可能对其他人有帮助。

select {
-webkit-appearance: listbox !important;
}

Answer 3

您已覆盖该-webkit-appearance属性select,该属性已被-webkit-appearance: menulist;浏览器设置为默认值.