带输入字段的中央单选按钮

如何解决带输入字段的中央单选按钮

我有一些自定义单选按钮。最后一个选项应该是带有输入字段的单选按钮。 如您所见，在de Codepen示例中，单选按钮未与输入字段垂直居中对齐。 我已经尝试了从计算顶部到显示flex的所有操作。

Codepen：https://codepen.io/monsmado/pen/RwarYEG

<form>
    <label>Do you have an elevator?</label>
    <div class="custom-control custom-radio">
        <input type="radio" id="elevatorYes" name="elevator" class="custom-control-input">
        <label class="custom-control-label" for="elevatorYes">Yes</label>
    </div>
    <div class="custom-control custom-radio">
        <input type="radio" id="elevatorNo" name="elevator" class="custom-control-input">
        <label class="custom-control-label" for="elevatorNo">No</label>
    </div>
    <div class="custom-control custom-radio">
        <input type="radio" id="elevatorOther" name="elevator" class="custom-control-input">
        <label class="custom-control-label" for="elevatorOther">
        <input type="text" class="form-control" name="elevator" placeholder="Other">
        </label>
    </div>
</form>

解决方法

好吧，一种适合您情况的快速解决方案可能是覆盖自定义单选按钮的当前最大值并将其设置为25% （因为它的实际高度是您的50%输入，以便25%恰好适合中间）。另外，请注意，在父元素上显示flex不会按预期方式工作，因为自定义单选在::before pseudo-element内退出，因此不会获得flex属性。

.custom-control-label[for=monthsOther]::before,.custom-control-label[for=monthsOther]::after {
  top: 25%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <label>How many months?</label>
  <div class="custom-control custom-radio">
    <input type="radio" id="monthsYes" name="months" class="custom-control-input">
    <label class="custom-control-label" for="monthsYes">1-2</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="monthsNo" name="months" class="custom-control-input">
    <label class="custom-control-label" for="monthsNo">3-5</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="monthsOther" name="months" class="custom-control-input">
    <label class="custom-control-label" for="monthsOther">
        <input type="text" class="form-control" name="months" placeholder="Other">
        </label>
  </div>
</form>

注意：请记住，由于单选按钮本身及其检查操作的背景是在::before和::after伪元素中定义的，因此您需要覆盖这两个元素

,

在这种情况下添加此CSS

.form-group:nth-child(4) .custom-control-label:after,.form-group:nth-child(4) .custom- control-label:before{
 margin-top: 0.5em
}

我用您的密码笔将解决方案发送给您

https://codepen.io/r0binxp/pen/qBZbJaZ

,

这似乎是改变表单元素外观的一种真正的技巧。最初的问题缺少任何CSS代码（这是所有问题出现的地方），但链接的Codepen确实显示了根本原因。正确对齐绝对定位的元素将非常困难，尤其是当您开始考虑从左到右或更大的字体大小时。此外，使用标签内的::before创建单选按钮的视觉表示是一种令人沮丧的方法，并且最终是一个不好的解决方案。

正确的解决方案可能是在收音机和标签上都使用vertical-align: middle或vertical-align: baseline。但是当元素完全定位时，这些元素将无效。