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

发布时间：2020-12-14 18:25:44 所属栏目：资源来源：网络整理

导读：我使用wordpress主题,出于某种原因,HTML选择框没有下拉区域.它们看起来就像普通的输入文本框,但是当您单击它们时,您可以看到下拉列表.我找不到哪些代码可能会删除下拉箭头. 这就是我在CSS中看到的全部内容： input:focus {outline: none;}select,input,texta

我使用wordpress主题,出于某种原因,HTML选择框没有下拉区域.它们看起来就像普通的输入文本框,但是当您单击它们时,您可以看到下拉列表.我找不到哪些代码可能会删除下拉箭头.

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

input:focus {
outline: none;
}

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

解决方法

这是一个基本选择

<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设置为外观时,您将删除箭头(默认情况下为menulist),当您将0设置为border-radius时,默认情况下将删除选定的边框.

注意如果您使用此规则隐藏了IE中的箭头,请选择:: – ms-expand {display：none;要使箭头返回,您需要将其设置为display：block

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!