html - CSS - 根据选择框的值隐藏元素(类)

Question

我有一个 <select> <form> 中的盒子, 当它的值为 other 时，我想要类为 .applicableSupportCase 的元素被隐藏。我正在尝试仅使用 CSS 来做到这一点。我做错了什么？

CSS

.applicableSupportCase  {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#typeBox[value="other"] ~ .applicableSupportCase{
  opacity: 0;
  transform: scaleY(0);
}

HTML

<select class="contactField" id="typeBox">
  <option value="supportCase" selected="selected">Support case</option>
  <option value="other">Other</option>
</select>

<label class="applicableSupportCase">Device:</label>

applicableSupportCase 有更多元素类，但你明白了。

Answer 1

实际上，css 属性选择器并不像您所想的那样查看值...

尽管 Javascript 看到了 value属性作为所选选项的值，CSS 只看到标记和 select[value='something']属性选择器实际上会寻找这个:

<select value='something'>

不适用于 <option>已选中。

通过 css-only，您将无法使用所选选项更改另一个元素，因为 <option>嵌套到 <select>标记，并且 css 上没有父级导航选择。

编辑

但是，您可以使用 javascript 对其进行模拟，并让您的 css 选择器保持原样。只需触发 select 的 onchange 事件来设置一个名为 value 的属性。到 DOM 选择元素:

See Working Fiddle Example

document.getElementById('typeBox').onchange = function() {
    this.setAttribute('value', this.value);
};