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

Question

我有一些自定义单选按钮。最后一个选项应该是带有输入字段的单选按钮。 如您所见，在 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>

Answer 1

在这种情况下添加这个 CSS

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

我在你的 codepen 中将解决方案发给你

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

Answer 2

好吧，一个快速解决您的情况的方法可能是覆盖自定义单选按钮的当前顶部值并将其设置为25% （因为它的实际高度是您输入的50%，所以@ 987654324@ 将正好放在中间）。另外，请注意，父元素上的 display 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 伪元素中定义的，因此您需要同时覆盖它们。

Answer 3

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

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