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

Question

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

我有以下困难：

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

此外，是否有任何其他方法来处理此类表单输入以达到相同的效果，即单选按钮的替代方法？

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

工作fiddle：https://jsfiddle.net/av7udft9/

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

Why CSS is not working when trying to make radio buttons look like buttons on forms?

javascript

css

forms

radio-button

multi-select