如何使用 CSS 正确隐藏表单 select 元素，包括 select 箭头

Question

我正在使用显示器：none；在样式 sheet 中隐藏多个表单域。当用户单击可见的 First Name 或 Last Name 字段时，其余字段将使用 JavaScript getElementById 显示块显示。

一切正常，除了向下箭头仍然显示在 select 元素中，而它应该与其他所有元素一起隐藏。我试过 CSS:

select {
    appearance: none;
}

但这没有用。下面是问题的图片，link 这里是测试页面：Form Test Page

Answer 1

在 select 父 div 中有一个 :before psedo-element。这是箭头而不是 select。

Answer 2

应该可以设置

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

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

进一步阅读：

如何使用 CSS 正确隐藏表单 select 元素，包括 select 箭头

How do I use CSS to properly hide a form select element, including the select arrow

javascript

css

forms

select

drop-down-menu

CSS

HTML