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

Question

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

我有以下困难：

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

1. 在您的情况下，要使Box shadow工作，您需要移除标签的overflow：auto-css属性，或者需要将Box shadow属性应用于其父元素"标签"；在CSS中。由于没有CSS父选择器，您需要使用JavaScript来实现它
2. 要使内容居中，可以执行以下操作

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

3. 为了使其在水平轴上居中(无论是选中还是未选中的情况(，只需更改如下所示

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

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