单选按钮的宽度和高度答案

【问题标题】：Width and height of radio button单选按钮的宽度和高度
【发布时间】：2022-01-09 16:13:48
【问题描述】：

我想用 CSS 设计单选按钮。输入应该被隐藏，以便标签扮演单选按钮的角色。但是，我很难调整这些标签的宽度和高度（我是 HTML 和 CSS 的新手）。问题是在.my-label、my-input、.my-ul input 中添加宽度和高度组件不会影响 CSS 组件的大小，它只会包裹文本...

感谢您的帮助！

MyComponent.js

    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"
                                for={fieldKey + value}
                            >
                                {options[value]}
                            </label>
                        </li>
                    )}
                </ul>
            </>
        );
   };

export default MyComponent;

MyComponent.css

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

.my-ul input{
    visibility:hidden;
    height: 100px;
}

.my-ul input + label {
    color: var(--radio_unchecked_text);
    background-color: var(--radio_unchecked_background);
    cursor: pointer;
    height: 100px; /* This doesn't change anything */
}

.my-ul input:checked + label {
    color: var(--radio_checked_text);
    background-color: var(--radio_checked_background);
    border: 1px solid var(--radio_checked_border);
    cursor: pointer;
    height: 100px;/* This doesn't change anything */
}

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

.my-input {
    width: 100%;
    height: 100px; /* This doesn't change anything */
}

.my-label{
    width: 100%;
    height: 100px; /* This doesn't change anything*/
}

【问题讨论】：

下次您有 CSS 问题时，请在minimal reproducible example 上发布所需的 HTML 和 CSS。这看起来根本不像是一个反应问题
对不起。我删除了 React 标签，下次会改进它:)

标签： html css radio-button

【解决方案1】：

其中的 REACT 部分在哪里？

你需要把它们做成 inline-block 来改变宽度

:root {
  --radio_unchecked_background: #16f;
  --radio_checked_background: #ff7;
  --radio_checked_border:  red;
}

.my-ul input {
  visibility: hidden;
}

.my-ul label {
  display: inline-block;
  width: 100px;
  height: 100px;
}

.my-ul input+label {
  color: var(--radio_unchecked_text);
  background-color: var(--radio_unchecked_background);
  cursor: pointer;
}

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

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

<ul class="my-ul">
  <li key=1 className="my-li">
    <input className="my-input" type="radio" name=fk id=fk1 value=option1 required />
    <label className="my-label" for=fk1>option1</label>
  </li>
  <li key=2 className="my-li">
    <input className="my-input" type="radio" name=fk id=fk2 value=option2 required />
    <label className="my-label" for=fk2>option2</label>
  </li>
  <li key=3 className="my-li">
    <input className="my-input" type="radio" name=fk id=fk3 value=option3 required />
    <label className="my-label" for=fk3>option3</label>
  </li>
</ul>

【讨论】：