如何使用 CSS 正确隐藏表单选择元素，包括选择箭头答案

【问题标题】：How do I use CSS to properly hide a form select element, including the select arrow如何使用 CSS 正确隐藏表单选择元素，包括选择箭头
【发布时间】：2022-02-13 04:12:45
【问题描述】：

我正在使用 display: none;在样式表中隐藏了一些表单域。当用户单击可见的 First Name 或 Last Name 字段时，其余字段将使用 JavaScript getElementById 显示块显示。

当它应该与其他所有内容一起隐藏时，除了向下箭头仍会从选择元素中显示之外，其他所有内容都有效。我试过 CSS：

select {
    appearance: none;
}

但这没有用。问题的下图和测试页面的链接：Form Test Page

【问题讨论】：

appearance CSS 属性用于根据操作系统的主题使用平台原生样式显示元素。它并不意味着隐藏元素。 - apperance: none; 没有应用特殊样式。这是默认设置。

标签： javascript css forms select drop-down-menu

【解决方案1】：

在选择父 div 内有一个 :before 伪元素。这是箭头而不是选择。

【讨论】：

工作。谢谢。

【解决方案2】：

应该可以设置

.elementor-select-wrapper::before { display: none }

【讨论】：

【解决方案3】：

您有三个主要选项：

CSS

i) display: none;

ii) visibility: hidden;

HTML

iii) hidden

工作示例：

select.b {
    display: none;
}

select.c {
    visibility: hidden;
}

<select class="a">
  <option>Option A1</option>
  <option>Option A2</option>
  <option>Option A3</option>
  <option>Option A4</option>
  <option>Option A5</option>
</select>

<select class="b">
  <option>Option B1</option>
  <option>Option B2</option>
  <option>Option B3</option>
  <option>Option B4</option>
  <option>Option B5</option>
</select>

<select class="c">
  <option>Option C1</option>
  <option>Option C2</option>
  <option>Option C3</option>
  <option>Option C4</option>
  <option>Option C5</option>
</select>

<select class="d" hidden>
  <option>Option D1</option>
  <option>Option D2</option>
  <option>Option D3</option>
  <option>Option D4</option>
  <option>Option D5</option>
</select>

进一步阅读：

【讨论】：