CSS - 根据选择框的值隐藏元素（类） [英] CSS - Hide elements (class) based on value of select box

问题描述

在< form> 中有一个< select> 框，当它的值是 other ，我希望隐藏类 .applicableSupportCase 的元素。我试图用CSS来做到这一点。我做错了什么？

CSS

  .applicableSupportCase {
过渡：变换0.3s缓解，不透明度0.3s缓解; 
} 
 #typeBox [value =other]〜.applicableSupportCase {
 opacity：0; 
 transform：scaleY（0）; 
 
  

HTML

 < select class =contactFieldid =typeBox> 
< option value =supportCaseselected =selected>支持案例< / option> 
< option value =other>其他< / option> 
< / select> 
 
< label class =applicableSupportCase>设备：< / label> 
  

applicableSupportCase 类还有更多元素，但你明白了这一点。 使用< select> 项，但是由于复选框和单选按钮的伪类：checked 状态，所以您可以使用它们来完成您想要的操作：

HTML

 < input type =radioid =supportCase NAME = 收音机 > 
< label for =supportCase>支持案例< / label> 
< input type =radioid =othername =radios> 
< label for =other>其他< / label> 
< br /> 
< label class =applicableSupportCase>设备：< / label> 
  

CSS

  input [id = other]：checked〜.applicableSupportCase {
 visibility：hidden; 
} 
  

我使用了可见性，但您可以将该属性更改为任何您想要的值。 / p>

如果你想要一个简单的输入输出，那么使用创建同样的语句：not（：checked）伪class：

  input [id = other]：not（：checked）〜.applicableSupportCase {
 // whatever （出）您想在这里
} 
  

JSFiddle： http://jsfiddle.net/ja2ud1Lf/

I have a <select> box in a <form>, and when its value is other, I want elements that have the class .applicableSupportCase to be hidden. I am trying to do this with just CSS. What am I doing wrong?

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>

There are more elements with the applicableSupportCase class, but you get the point.

解决方案

This can't be done using a <select> item, however because of the pseudo class :checked states of checkboxes and radio buttons, you can accomplish what you wanted using those instead:

HTML

<input type="radio" id="supportCase" name="radios"> 
<label for="supportCase">Support Case</label>
<input type="radio" id="other" name="radios"> 
<label for="other">Other</label>
    <br />
<label class="applicableSupportCase">Device:</label>

CSS

input[id=other]:checked ~ .applicableSupportCase {
  visibility:hidden;
}

I used visibility, but you can change the attribute to whatever you want.

If you want an ease in and out, then create the same statement using the :not(:checked) pseudo class:

input[id=other]:not(:checked) ~ .applicableSupportCase {
  //whatever ease(out) you want here
}

JSFiddle: http://jsfiddle.net/ja2ud1Lf/

这篇关于CSS - 根据选择框的值隐藏元素（类）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！