带有标题和字幕标签的单选按钮

Question

我有3个看起来像纽扣的单选按钮。

这里代码：

<div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label class='custom-control-label' for='rb-dtp'>DTP</label>
            <label class='custom-control-label-help' for='rb-dtp'>Vaccine against diphtheria, tetanus, pertussis</label>
        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label class='custom-control-label' for='rb-mmr'>MMR</label>
            <label class='custom-control-label-help' for='rb-mmr'>Vaccine against measles, mumps and rubella</label>
        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label class='custom-control-label' for='rb-pol'>POL</label>
            <label class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</label>
        </span>
    </div>

但我想要的是:一个“标题”标签和一个“副标题”标签。

​

​

我该怎么做？

Answer 1

您需要将两个标签包装在一个标签下，并为这个父标签提供' for‘属性，并且可以将这些单独的内部标签更改为任何其他标签(例如:P标记)。

<div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label for='rb-dtp'>
                <p class='custom-control-label'>DTP</p>
                <p class='custom-control-label-help'>Vaccine against diphtheria, tetanus, pertussis</p>
            </label>

        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label for='rb-mmr'>
                <p class='custom-control-label'>MMR</p>
                <p class='custom-control-label-help'>Vaccine against measles, mumps and rubella</p>
            </label>

        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label for='rb-pol'>
                <p class='custom-control-label'>POL</p>
                <p class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</p>
            </label>
        </span>
    </div>

Answer 2

不确定这是否是你想要达到的目标，我希望这能有所帮助。

<div class="radio">
  <label><input type="radio" name="optradio">
    <h3>Title</h3>
    <p>Sub Title</p>
  </label>
</div>

Answer 3

儿童是单向的(演示)：

    <div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label class='custom-control-label' for='rb-dtp'>
              <div>DTP</div>
              <label class='custom-control-label-help' for='rb-dtp'>Vaccine against diphtheria, tetanus, pertussis</label>
            </label>

        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label class='custom-control-label' for='rb-mmr'>
              <div>MMR</div>
              <label class='custom-control-label-help' for='rb-mmr'>Vaccine against measles, mumps and rubella</label>
            </label>

        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label class='custom-control-label' for='rb-pol'>
              <div>POL</div>
                <label class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</label>
            </label>

        </span>
    </div>