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

I am trying to create a multi-select radio button, that looks like a regular button for my form.

I have the following difficulties:

1) When the button is activated, I can’t put the box shadow around it. This is what I tried:

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

2) Content inside the button is not centered, This is what I tried:

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

3) When the button is checked, the content is centered on cross axis, but not on horizontal axis. Why is it only centered when it’s active?

Full example: https://jsfiddle.net/7u3b29r5/6/

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

Also, is there any other way to handle such form inputs to achieve same effect, that is alternative to radio buttons?

Answer

1. In your case, for Box shadow to work you need to either remove overflow:auto css property for label or you need to apply box-shadow property to its parent element “label” in CSS. As there is no CSS parent selector you need to use JavaScript to achieve it.
2. To center the content you can do something like below

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

3. For centering it in horizontal axis (both checked and unchecked cases) just change this as shown below.

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

Working fiddle: https://jsfiddle.net/av7udft9/