当Select(选择）显示'其他'只使用CSS

How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

本文关键字：CSS 其他 Select 显示 选择      更新时间：2023-09-26

我正在为客户端创建一个表单，如果用户在下拉菜单"选择"中选择"其他"，则会出现一个文本框。否则就应该隐藏起来。我在很多网站上都看到过这种情况。

我可以很容易地为单选按钮使用这样的代码：

.the-text-input-box {
  opacity: 0;
}
input[type="radio"]:checked ~ .the-text-input-box {
  opacity: 1;
}

但我不知道如何以同样的方式针对Selector中的"Other"选项。

我希望只使用CSS就可以实现这一点。

你不能只使用CSS来实现这一点。您需要Javascript，因为您选择的选项不是DOM中输入框的同级选项：

<select name="mySelect" id="mySelect">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="other">Other</option>
</select>
<input type="text" name="input-box" id="inputBox" cols="30" rows="10" class="hidden"/>

有了复选框，这是可能的，因为输入框直接跟在你的框后面：

<input type="checkbox" name="checkme" id="checkme"/>
<input type="text" name="myInput" id="myInput" />

因此，在Javascript中，您需要在选择时使用一个事件侦听器来隐藏/显示输入框。像这样的东西应该能起到作用：http://jsfiddle.net/1cevh233/

JS-

var selectEl = document.getElementById('mySelect');
var inputBox = document.getElementById('inputBox');
var listener = function(e){
if(selectEl.value == "other"){
       inputBox.className="";
}else{
       inputBox.className="hidden";
}
}

selectEl.addEventListener('change',listener);

CSS

.hidden{
    display:none;
}
相关文章：