Width and height of radio button-CodePudding

I want to design radio buttons in CSS. The input should be hidden, so that the label takes the role of the radio button. However, I am having a hard time adjusting width and height of these labels (I'm new to HTML and CSS). The problem is that adding width and hight components in .my-label, my-input, .my-ul input don't affect the size of the CSS components, it only wraps the text...

I appreciate your help!

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*/
}

CodePudding user response：

Where is the REACT part of this?

You need to make them inline-block to change the width

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