为什么在尝试使单选按钮看起来像表单上的按钮时 CSS 不起作用？答案

【问题标题】：Why CSS is not working when trying to make radio buttons look like buttons on forms?为什么在尝试使单选按钮看起来像表单上的按钮时 CSS 不起作用？
【发布时间】：2021-07-16 15:06:19
【问题描述】：

我正在尝试创建一个多选单选按钮，它看起来像我的表单的常规按钮。

我有以下困难：

1) 当按钮被激活时，我不能在它周围放置盒子阴影。这是我尝试过的：

.biggerRadioButton input:checked + span {
    box-shadow: 0 0 20px #9bcd2c;
}

2) 按钮内的内容不居中，这是我试过的：

.textWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

3) 选中按钮时，内容以横轴为中心，但不在横轴上。为什么只有激活时才居中？

完整示例： https://jsfiddle.net/7u3b29r5/6/

我的html

<div className={styles.biggerRadioButton}>
  <label>
    <input type="radio" name={name} />
    <span>
      <div className={styles.textWrapper}>
        <div className={styles.box1}>title centered</div>
        <div className={styles.box2}>long text centered</div>
      </div>
    </span>
  </label>
</div>;

另外，有没有其他方法可以处理此类表单输入以达到相同的效果，即单选按钮的替代方法？

【问题讨论】：

您的标签有overflow:auto; 阻止box-shadow 可见。您的内容不是水平居中的，因为.box1 和.box2 有flex: 1 和flex: 2，这意味着它们正在逐渐占据所有空间，如果它占据了整个空间，你就无法证明某些东西是合理的。

标签： javascript css forms radio-button multi-select

【解决方案1】：

在您的情况下，要使 Box shadow 起作用，您需要删除标签的 overflow:auto css 属性，或者您需要将 box-shadow 属性应用于 CSS 中的父元素“label”。由于没有 CSS 父选择器，您需要使用 JavaScript 来实现它。
要使内容居中，您可以执行以下操作

.box1, .box2 {text-align:center;}

要使其在水平轴上居中（选中和未选中的情况），只需按如下所示进行更改。

.biggerRadioButton label span { font-size: 14px; display: block; height: 100%; }

工作小提琴：https://jsfiddle.net/av7udft9/

【讨论】：