单选按钮的宽度和高度

Question

我想在CSS中设计单选按钮。输入应该被隐藏，这样标签就起到了单选按钮的作用。但是，我很难调整这些标签的宽度和高度（我是 HTML 和 CSS 的新手）。问题是在 .my-label、my-input、.my-ul input 中添加 width 和 hight 组件不会影响 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*/
}

Answer 1

REACT 部分在哪里？

您需要将它们设为内嵌块以更改宽度

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

单选按钮的宽度和高度

Width and height of radio button

html

css

radio-button