Question 196496 in Html Question posted in
Some basic documentation can be found here.

Html – Styling radio button – background color

I want that the background inner color of the radio buttons are the same as the background color of the container, and no border around the selection.

I tried with background color, color, but didn’t work.
In the HTML the buttons are not into a form tag, by now I don’t need it, I’ve even tried to add it to see if something changed but without results, any idea?

I know i can just put normal buttons styling easier, but i want the "one-only" selection. I could code it in JS but if possible to style the radio button is better!

Current situation: actual situation

Desired result: result

.radioButton {
  background-color: rgb(37, 45, 68);
  border-radius: 50px;
}

input {
  accent-color: red;
}
<div class="radioButton">
  <input type="radio" id="color1" name="color" checked="true">
  <input type="radio" id="color2" name="color">
  <input type="radio" id="color3" name="color">
</div>
Tags:

2

Answers


  1. 0

    Hide <input> then add <span>, styling the <span>.

    Remember to wrap <span> and <input> in <label> so the radio input will be checked when <span> was clicked.

    .radioButton {
  background-color: rgb(37, 45, 68);
  border-radius: 50px;
  width: max-content;
  padding: 2px 6px;
}

input {
  display: none;
}

input+span {
  display: inline-block;
  border-radius: 50%;
  width: 12px;
  aspect-ratio: 1;
  background-color: rgb(37, 45, 68);
}

input:checked+span {
  background-color: red;
}
    <div class="radioButton">
    <label>
        <input type="radio" id="color1" name="color" checked="true">
        <span></span>
    </label>
    <label>
        <input type="radio" id="color2" name="color" checked="true">
        <span></span>
    </label>
    <label>
        <input type="radio" id="color3" name="color" checked="true">
        <span></span>
    </label>
</div>
    Login or Signup to reply.
  2. 0

    You can use CSS appearance: none to remove the browser default styling and then add in your own:

    <style>
  .radioButton {
    background-color: rgb(37, 45, 68);
    border-radius: 50px;
  }
  
  input {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border-color: transparent;
  }
  
  input:checked {
    background: red;
  }
</style>
<div class="radioButton">
  <input type="radio" id="color1" name="color" checked="true">
  <input type="radio" id="color2" name="color">
  <input type="radio" id="color3" name="color">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search