css - 基于选项选择显示/隐藏内容的纯 CSS 方式？

Question

我的问题与此类似:CSS to select another Element based on a HTML Select Option Value

这是我的 HTML:

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

我想隐藏 <p>当用户从列表中选择一张卡片时，并在用户选择空选项时显示它。

这在纯 CSS 中可行吗，还是我需要使用 JavaScript？

Answer 1

使用必需的属性:

<select id="select-card" required>

并为元素编写有效和无效的规则，选择以下p-元素:

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

Fiddle