我想在选中SPECIFIC单选按钮时出现隐藏的表单元素?

时间:2015-03-05 10:55:51

标签: html css radio-button hidden

我似乎无法找到这样做的方法,我可以通过neares单选按钮将其工作,但不是特定的。

这是我的一些代码,几乎可以满足我的需要:

...
Are you a supplier?:<br />
<input type="radio" name="supplier" id="supplier_no" value="0"/> No<br>
<div>
<input type="radio" name="supplier" id="supplier_yes" value="1"/> Yes
<br /><br />
<div class="languagereveal1">
What Language do you work with?:<br />
<select name="language1" value="">
...

支持它的CSS:

.languagereveal1 {
opacity: 0;
max-height: 0;
overflow: hidden;
}

input[type="radio"]:checked ~ .languagereveal1 {
opacity: 1;
max-height: 100px;
overflow: visible;
}

我想要的是“否”单选按钮前的“是”单选按钮。

我认为必须有一种方法来指定在CSS的“input [type =”radio“]”位中使用ID,我尝试使用我所知道的但是这似乎不正确我我环顾四周但找不到任何东西。

任何帮助都将不胜感激,谢谢。

1 个答案:

答案 0 :(得分:1)

如果你想移动&#34;是&#34;按钮之前&#34;否&#34;,然后使用HTML结构选择器:

#supplier_yes:checked ~ div > .languagereveal1 {
    opacity: 1;
    max-height: 100px;
    overflow: visible;
}

input[type="radio"]:checked ~ div > .languagereveal1也可以。

演示: http://jsfiddle.net/v3p2fju7/