重力形式-具有个别说明的单选按钮

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;
}

它看起来像这样：