CSS实现自定义单选按钮时label标签宽高设置不生效问题求解

label标签属于默认的行内（inline）元素，行内元素的尺寸由内部内容撑开，直接设置width、height属性不会生效，这是你设置宽高无响应的根本原因。
另外你用visibility: hidden隐藏单选框的方式会保留元素原本占据的布局空间，也会挤压label的显示区域。

1. 给label添加display属性，设置为inline-block或者block，即可让宽高配置生效
2. 优化单选框input的隐藏逻辑，改为不占用布局空间的隐藏方式，避免影响label排版
3. 修正React代码中label的关联属性：React框架下需要把for改为htmlFor，否则会触发属性警告，也可能导致点击label无法选中单选框的问题

MyComponent.js 调整部分 #

仅需要修改label的属性即可：

import './MyComponent.css';
import React from 'react';

const MyComponent = ({fieldKey}) => {
    const options = ['Option 1', 'Option 2', 'Option 3'];
    return (
        <>
            <ul className="my-ul">
                {[0, 1, 2].map((value, index) =>
                    <li key={index} className="my-li">
                        <input
                            className="my-input"
                            type="radio"
                            name={fieldKey}
                            id={fieldKey + value}
                            value={value}
                            required
                        />
                        <label
                            className="my-label"
                            htmlFor={fieldKey + value}
                        >
                            {options[value]}
                        </label>
                    </li>
                )}
            </ul>
        </>
    );
};

export default MyComponent;

MyComponent.css 调整后代码 #

删除了重复的宽高配置，新增了display属性和优化了input隐藏逻辑：

/* 补充全局自定义变量，避免样式找不到变量失效，可根据需求修改值 */
:root {
  --radio_unchecked_text: #333;
  --radio_unchecked_background: #f5f5f5;
  --radio_checked_text: #fff;
  --radio_checked_background: #2d8cf0;
  --radio_checked_border: #2d8cf0;
}

.my-ul {
    list-style: none;
    background-color: red;
    padding: 0;
    margin: 0;
}

/* 隐藏input，不占用任何布局空间 */
.my-ul input{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.my-ul input + label {
    display: inline-block; /* 新增：让宽高设置生效 */
    color: var(--radio_unchecked_text);
    background-color: var(--radio_unchecked_background);
    cursor: pointer;
    width: 100%;
    height: 100px;
    line-height: 100px; /* 可选：让文字垂直居中 */
    text-align: center; /* 可选：让文字水平居中 */
    box-sizing: border-box; /* 避免边框撑大盒子宽度 */
}

.my-ul input:checked + label {
    color: var(--radio_checked_text);
    background-color: var(--radio_checked_background);
    border: 1px solid var(--radio_checked_border);
}

.my-li {
    display: inline-block;
    width: 33.333%;
    background-color: black;
    box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Luca