CODEWITHSUNDEEP
javascriptcssformsselectdrop-down-menu
chris
chris

Reputation: 77

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

I'm using display: none; in the style sheet to hide a number of form fields. When the user clicks the visible First Name or Last Name fields, the rest of the fields display using JavaScript getElementById to display block.

Everything works except the down arrow still displays from the select element when it should be hidden with everything else. I tried CSS:

select {
    appearance: none;
}

but that did not work. Image below of the problem and link here to the test page: Form Test Page

Test Page Screen

Upvotes: 1

Views: 671

Answers (3)

Rounin
Rounin

Reputation: 29511

You have three main options:

CSS

i) display: none;

ii) visibility: hidden;

HTML

iii) hidden

Working Example:

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>

Further Reading:

Upvotes: 0

Dennis
Dennis

Reputation: 11

Should be able to just set

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

Upvotes: 0

andys
andys

Reputation: 100

There is a :before psedo-element inside the select parent div. This is the arrow and not the select. enter image description here

Upvotes: 0

Related Questions