How to style an HTML radio input element such that the radio button is absent

Issue

I'm working on a challenge and would like to know how I can style a radio input element such that:

• the actual radio feature itself is not present,
• the element will be such that when selected, its background-color changes to a color of my choosing,
• the element can't be deselected after being selected (just like a proper radio button).

I have searched and found this ModernCSS article which didn't provide what I was looking for. I applied what I understood from the article like so:

<label role="radio" class="radio">
    <input type="radio" name="radio">
    5%
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    10%
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    15%
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    25%
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    50%
</label>
<label role="textbox">
    <input type="text" name="amount" value="40%">
</label>

input[type="radio"] {
    display: grid;
    place-content: center;
    appearance: none;
    margin: 10% 0 0;
    width: 2rem;
    height: 1rem;
    align-items: center;
    background-color: #fff;
}

input[type="radio"]:checked {
    background-color: hsl(172, 67%, 45%);
}

.radio {
    grid-template-columns: 1rem auto;
    gap: 0.5rem;
    background-color: hsl(183, 100%, 15%);
}

As with many other articles I tried, such as this article from Bryntum and this from W3Schools, they show you how to style the radio itself which I don't need, since I'm trying to get rid of it altogether.

Solution

I guess you don't actually want the radio buttons to be absent, but you want them not to be seen as you'll still want their clickable qualities.

You can achieve this by setting their opacity to 0.

What you also need is the label element to be influenced by whether its associated input is checked or not. This snippet alters the order so the label comes immediately after the input and the new color (when the radio button is checked) is put onto the label, not onto the radio button.

Note also the use of the 'for' attribute which says that label is associated with that input (via id).

This snippet groups each input/label pair in a div with class choice and groups the lot into a div with class choices to make formatting easier.

.choices {
  display: flex;
  gap: 10px;
}

input[type="radio"] {
  opacity: 0;
  width: 2rem;
  height: 1em;
  background-color: #fff;
  position: absolute;
}

input[type="radio"]:checked+label {
  background-color: hsl(172, 67%, 45%);
}

.radio {
  background-color: hsl(183, 100%, 15%);
  color: white;
}

<div class="choices">
  <div class="choice">
    <input type="radio" name="radio" id="five">
    <label role="radio" class="radio" for="five">
    5%
</label>
  </div>
  <div class="choice">
    <input type="radio" name="radio" id="ten">
    <label role="radio" class="radio" for="ten">
    10%
</label>
  </div>
  <div class="choice">
    <input type="radio" name="radio" id="fifteen">
    <label role="radio" class="radio" for="fifteen">
    15%
</label>
  </div>
  <div class="choice">
    <input type="radio" name="radio" id="twentyfive">
    <label role="radio" class="radio" for="twentyfive">
    25%
</label>
  </div>
  <div class="choice">
    <input type="radio" name="radio" id="fifty">
    <label role="radio" class="radio" for="fifty">
    50%
</label>
  </div>
  <div class="choice">
    <input type="text" name="amount" value="40%" id="text">
    <label role="textbox" for="text">
</label>
  </div>
</div>

Obviously you will want to set the formatting as you want it, and I am not clear what you want to happen with the input of type text as you've given it a different name. I'll put up a comment in order to get clarification.

Answered By - A Haworth