选择与值对

假设在一个表单中，您需要允许用户选择一个唯一的选项。 这可以使用下拉菜单或一组单选按钮来实现。 现在，假设每个选项都有一个直接的后续问题。 例如，一个科学液体的订购表格。 它有盎司、杯或品脱，一旦选择，就需要指定要订购的盎司、杯或品脱数量。 这是一个有趣的、可以使用多种方式实现的设计模式。

为了实现深度的浏览器兼容性，您可能需要使用一些 JavaScript 来隐藏/显示特定的表单元素。 但为了好玩，让我们只使用 CSS 来实现。

单选按钮和数字输入都在标签内

对于每个唯一选项，我们将使用标签包装单选按钮、标签本身的文本和数量的数字输入。

<label for="oz">
  <input type="radio" name="choice" value="oz" id="oz" data-label="Ozs"> 
  
  Ounces
  
  <input type="number" name="oz-val">
</label>

默认情况下隐藏数字输入

因为单选按钮和数字输入现在是相邻兄弟元素，所以我们可以使用 相邻兄弟选择器 来专门针对这些输入，并默认隐藏它们。

input[type='radio'] + input[type='number'] { 
    display: none;
}

单选按钮被选中时显示输入

我们可以使用几乎相同的选择器来显示单选按钮被选中时的数字输入，只需将 伪类选择器 :checked 附加到单选按钮上。 然后我们将它定位到右侧。

input[type='radio']:checked + input[type='number'] { 
    display: inline; /* unhide */
    float: right;
    margin-right: 20px; /* space for "label" */
    width: 100px;
}

“标记”数字输入

为了更明确地说明我们使用这些数字输入请求的内容，我们可以在输入附近应用文本。 请注意单选按钮上的“data-label”属性，我们将捕捉它并将其放入伪元素文本中。

input[type='radio']:after {
    position: absolute;
    right: 9px;
    top: 9px;
}
input[data-label]:checked:after {
	content: attr(data-label);
}

突出显示整个选定选项/值

为了非常直观地显示我们选择了哪个选项，以及该选项与数量值是如何配合的，我们将应用一个突出显示的行来覆盖这两个区域。

input[type='radio']:checked:before { 
    background: #ebdcad; 
    content: ""; 
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 8px;
    z-index: -1;
}

可访问性？ 浏览器兼容性？

订购表格是那些非常重要的事情，您需要尽可能地提高可访问性和浏览器兼容性。 这只是一个有趣、可能会在将来派上用场的 CSS 练习，但可能稍微超前了。

从可访问性的角度来看，它可能没问题。 对未使用的输入使用 display: none 是可以的，因为我们实际上希望它们在进行选择之前隐藏，但我不知道它们是否会明显地显示出来。 如果有谁想代表可访问性专家在评论区发言，我非常乐意听到。

浏览器兼容性更棘手。 为了使其正常工作，浏览器需要支持相邻兄弟选择器，而这我们只讨论到 IE 8+。 尽管如果该选择器失败，所有数字输入都会显示出来，这并不算什么大问题。 您需要将样式转移到不使用“+”的选择器中。 字段突出显示和伪标记需要伪元素，因此它也有 自身的兼容性问题。 最后但同样重要的是，伪元素在单选按钮元素上是否允许使用并不明确。 输入是“无内容”样式元素（它们自闭合，例如 img 元素）。 Opera 和 WebKit 恰好支持它，但目前还不清楚它们是否应该支持。 Firefox 不支持，因此您在该浏览器中将看不到突出显示或标记。

如果您需要一个 100% 万无一失的解决方案，您可以使用 Wufoo 表单，并使用 字段规则 来隐藏/显示其他字段。

完成

查看演示   下载文件

感谢 Bradley Staples 发送电子邮件关于这个想法。