重力形式 - 带有单独描述的单选按钮

Question

我有一些单选按钮需要对每个选项进行文字说明，以便用户知道他们在选择什么。

我想为每个可以接受 HTML 的单选按钮选项在单选按钮选项中添加一个输入字段。这需要显示在每个单选列表项中。我尝试简单地将详细信息添加到下面的 HTML 区域，但这不适用于移动屏幕，因为详细信息与收音机选项无关，因此在调整屏幕大小时不会出现在每个收音机下方。

Answer 1

您是否考虑过在单选按钮标签中包含说明？如果您像这样配置每个选项标签：

<div><span>First Choice</span><span>And this is the description.</div>

您可以使用以下 CSS 设置样式：

.ginput_container_radio input {
    vertical-align: bottom;
}

.ginput_container_radio label span {
    display: block;
}

.ginput_container_radio label span:nth-child(2) {
    opacity: 0.6;
    font-size: 0.9em;
}

它看起来像这样：