如何仅用HTML和CSS实现调查表单下拉选Yes后显示新问题？

完全可以做到，不用JavaScript。核心思路是用单选按钮（radio）模拟下拉菜单的交互，配合CSS的:checked伪类和兄弟选择器来控制元素的显示隐藏。以下是针对你的需求写的完整示例：

HTML 结构 #

<!-- 模拟下拉菜单的容器 -->
<div class="dropdown-container">
  <label for="dlc-own-trigger">Do you own the DLC?</label>
  <!-- 隐藏的单选按钮，用于触发状态变化 -->
  <input type="radio" name="dlc-own" id="dlc-yes" class="radio-hidden">
  <input type="radio" name="dlc-own" id="dlc-no" class="radio-hidden" checked>
  
  <!-- 模拟下拉选项列表 -->
  <div class="dropdown-options">
    <label for="dlc-yes" class="option">Yes</label>
    <label for="dlc-no" class="option">No</label>
  </div>
</div>

<!-- 需要动态显示的后续问题 -->
<div class="hidden-question">
  <label>Which DLC packs do you own?</label>
  <input type="text" placeholder="List the DLC names...">
</div>

CSS 样式 #

/* 隐藏原生单选按钮 */
.radio-hidden {
  display: none;
}

/* 下拉容器样式 */
.dropdown-container {
  position: relative;
  margin: 1rem 0;
}

.dropdown-container label[for="dlc-own-trigger"] {
  display: block;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  background: white;
}

/* 下拉选项列表默认隐藏 */
.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: white;
  display: none;
}

/* 点击触发标签时显示选项列表 */
.dropdown-container label[for="dlc-own-trigger"]:focus-within + .radio-hidden + .radio-hidden + .dropdown-options,
.dropdown-options:hover {
  display: block;
}

/* 选项样式 */
.option {
  display: block;
  padding: 0.5rem;
  cursor: pointer;
}

.option:hover {
  background: #f0f0f0;
}

/* 默认隐藏后续问题 */
.hidden-question {
  margin: 1rem 0;
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 4px;
  display: none;
}

/* 选中Yes时显示后续问题 */
#dlc-yes:checked ~ .hidden-question {
  display: block;
}

原理说明 #

1. 用隐藏的单选按钮记录用户的选择状态，CSS可以通过:checked伪类检测单选按钮的选中状态。
2. 用label标签模拟下拉菜单的触发按钮和选项，点击label会自动关联对应的单选按钮，改变其选中状态。
3. 利用兄弟选择器~，当#dlc-yes被选中时，控制后续的.hidden-question元素从display: none变为display: block，实现显示效果。

这种方案完全基于HTML和CSS，不需要任何JavaScript代码，适配你的需求。

内容的提问来源于stack exchange，提问作者LearningForaYear