Pure CSS way to show/hide content based on option select?

Question

My question is similar to this one: CSS to select another Element based on a HTML Select Option Value

Here's my HTML:

    <select id="select-card">
      <option value=""></option>
      <option value="card">**** **** **** 1982</>
    </select>
    <p>Or enter a new one...</p>

I want to hide the <p> when the user selects a card from the list, and show it when the user selects the empty option.

Is this possible in pure CSS, or do I need to use JavaScript?

You'll need JavaScript since there's no parent selector in CSS (yet). — j08691, Feb 19 '15 at 17:14
_“My question is similar to this one”_ – in fact, it is so much alike, that I think this should be closed as a duplicate. — CBroe, Feb 19 '15 at 17:15
@CBroe well strictly speaking that question has no answer, which is why I linked to it and asked again... — Richard, Feb 19 '15 at 17:16
That this is not possible because there is no parent selector in CSS _is_ the answer … and that still holds true. — CBroe, Feb 19 '15 at 17:19

score 2 · Answer 1 · answered Feb 19 '15 at 17:26

2

Use the required attribute:

<select id="select-card" required>

And write rules for valid and invalid for the element, selecting the following p-element:

#select-card:invalid + p { display: block; }
#select-card:valid + p { display: none; }

Fiddle

answered Feb 19 '15 at 17:26

msfoster

2,474
1
17
19

OK, nice “workaround” for this specific case. (Although not sure whether the implications of `required` are wanted here or not.) – CBroe Feb 19 '15 at 17:42
@msfoster what if I want to change visibility of multiple `div`s and when I have more than 2 options? – Gaurav Paliwal Jul 17 '17 at 01:06
@GauravPaliwal I suggest you create a question where you explain your problem in detail. – msfoster Jul 31 '17 at 08:20

Pure CSS way to show/hide content based on option select?

1 Answers1

Linked

Related