so I am writing CSS and I have a grid of five radio buttons and one input. It’s supposed to be a part of a tip calculator, and in this particular section you select the tip percentage. With the radio buttons, you can only select one at at time.

However, I’m not entirely sure how to link the input with the radio buttons without Javascript. For example, if the user input a custom tip, I would not like for them to be able to click on other buttons without the custom input first being cleared. Is this possible without JS?

Here is my code:

HTML:

<div class="input-wrapper tip-section">
                <label class="tip-header" for="">Select Tip %</label>
                <div class="tip-button-container">
                    <label class="tip-label" for="5">
                        <input type="radio" id="5" name="radio" class="tip-button">
                        <span class="tip-span">5%</span>
                    </label>
                    <label class="tip-label" for="10">
                        <input type="radio" id="10" name="radio" class="tip-button">
                        <span class="tip-span">10%</span>
                    </label>
                    <label class="tip-label" for="15">
                        <input type="radio" id="15" name="radio" class="tip-button">
                        <span class="tip-span">15%</span>
                    </label>
                    <label class="tip-label" for="25">
                        <input type="radio" id="25" name="radio" class="tip-button">
                        <span class="tip-span">25%</span>
                    </label>
                    <label class="tip-label" for="50">
                        <input type="radio" id="50" name="radio" class="tip-button">
                        <span class="tip-span">50%</span>
                    </label>
                    <label for="custom" class="tip-label custom-label">
                        <input type="radio" name="radio" class="tip-button">
                        <input id="custom" name="radio" class="custom-tip" type="number" placeholder="Custom">
                    </label>
                </div>
            </div>

CSS:

input {
    font-family: spaceMonoBold, sans-serif;
    width: 100%;
    border: none;
    background-color: var(--very-light-grayish-cyan);
    font-size: 1.5rem;
    font-weight: bold;
    text-align: right;
    color: var(--very-dark-cyan);
    padding: .35rem 1rem;
    border-radius: .25rem;
}

.tip-button {
    display: none;
}

.tip-span {
    min-width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--very-dark-cyan);
    color: var(--white);
    font-size: 1.5rem;
    border-radius: .25rem;
    cursor: pointer;
    transition: .1s;
}


input:hover + .tip-span {
    background-color: var(--light-grayish-cyan);
    color: var(--very-dark-cyan);
}

input:active + .tip-span {
    transform: scale(.9);
    transform: rotate(3deg);
}

input:checked + .tip-span {
    background-color: var(--strong-cyan);
    color: var(--very-dark-cyan);
}

I’ve tried using the checked pseudo-class, but couldn’t get that to work.