How do I change the color of radio buttons?

Question

I mean, a radio button itself consists of a round shape and a dot at the center (when the button is selected). What I want to change is the color of both. Can this be done using CSS?

Nadya

Using CSS you can use filter: grayscale(1); for dark grey, or use filter: hue-rotate() for other colors, in case you don't want to create a custom element. – Bushed

Also, if you want to achieve specific color using the filter, usefilter:brightness(0%) to achieve black color and extend using this great answer – Codon

Answer 1

A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)

Culosio

I believe so. No browser that I know of presents a way to configure the look of radio buttons, you will have to use a JS library to accomplish this. – Culosio

Or use css but you need the image like you said. This is a bit strange – Mcwhorter

Post 8/1/2014: This method will now disable and remove the input field from the submitted form data. It is in response to abuse by companies that placed checkboxes out of sight, that declared their users agreed to permission and regulations the visitors could not evaluate before proceeding. If the literal button is not displayed on the screen, it is considered 'disabled' – Foliose

Read my answer below for a modern solution using CSS. – Bumptious

'this' link is currently 404'ing. If it ever comes back, let us know! – Hierogram

@Hierogram thanks for your comment, I've added a link from web.archive.org to see a cached version of the original article, hope this helps :) – Culosio

Since this is an old accepted answer, I'll just make it known that this is no longer a true statement that you can't change the input color with css. You can now use the accent-color css property. See Gonjila's answer. – Terwilliger

Answer 2

A quick fix would be to overlay the radio button input style using :after

    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

<input type='radio' name="gender"/>
<input type='radio' name="gender"/>

Subhead

This worked well for me. Great solution when you don't want to add any extra elements or use images. – Copenhaver

In general browsers do accept ":after" styling only for container elements - as defined in W3C. Input is no container and thus generally does not support after styling. w3.org/TR/CSS2/generate.html#before-after-content – Petronel

Just plopping a timestamp to enforce previous observations - it still only works in Chrome (60.0.3112.90). I tried it on Microsoft Edge (38.14393.1066.0) and Firefox (54.0.1, 32-bit) but no dice. – Hierogram

Updating from @markreyes: Works in Chrome (64-bit 73.0.3683.75), works somewhat in Safari (12.0.3), and doesn't work in Firefox (64-bit 65.0.1) on March 15 2019. – Stoneman

I had to use left= "-5px" in chrome or some of my label was obscured – Ixion

actually left= "-3px" and top="-3px" is a more exact cover – Ixion

not colorblind friendly – Digit

If you want the dot in the circle look you can do the following with padding - background-clip: content-box, padding-box; padding: 2.25px; Be aware that the original radio button is still behind though so you may have to adjust things until it still covers it. – Curricle

Tested today (2/2/2022) using Chrome (97.0.4692.99), FireFox (96.0.3), Opera (83.0.4254.27), and Edge (97.0.1072.46). All appear to work. It's a smidge off center in Opera, but works well enough. – Fasciate

Answer 3

You can use the CSS accent-color property to change the color.

input[type='radio'] {
    accent-color: #232323;
}

It works with Chrome/Edge 93+, Firefox 92+, and Safari 15.4+ (Browser support info from caniuse.)

Bencion

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Subaxillary

This works if you don't mind cross-browser compatibility. thanks! – Dynamics

@RishabhDeepSingh What are you on about, this 100% answers OP's question. OP wanted coloured radio inputs, and this does exactly that? – Whinstone

Hooray, only 25 years! – Bobbyebobbysocks

Answer 4

As Fred mentioned, there is no way to natively style radio buttons in regards to color, size, etcc. But you can use CSS Pseudo elements to setup an impostor of any given radio button, and style it. Touching on what JamieD said, on how we can use the :after Pseudo element, you can use both :before and :after to achieve a desirable look.

Benefits of this approach:

• Style your radio button and also Include a label for content.
• Change the outer rim color and/or checked circle to any color you like.
• Give it a transparent look with modifications to background color property and/or optional use of the opacity property.
• Scale the size of your radio button.
• Add various drop shadow properties such as CSS drop shadow inset where needed.
• Blend this simple CSS/HTML trick into various Grid systems, such as Bootstrap 3.3.6, so it matches the rest of your Bootstrap components visually.

Explanation of short demo below:

• Set up a relative in-line block for each radio button
• Hide the native radio button sense there is no way to style it directly.
• Style and align the label
• Rebuilding CSS content on the :before Pseudo-element to do 2 things - style the outer rim of the radio button and set element to appear first (left of label content). You can learn basic steps on Pseudo-elements here - http://www.w3schools.com/css/css_pseudo_elements.asp
• If the radio button is checked, request for label to display CSS content (the styled dot in the radio button) afterwards.

The HTML

<div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

The CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

A short demo to see it in action

In conclusion, no JavaScript, images or batteries required. Pure CSS.

Bumptious

This technique worked for me in Chrome (60.0.3112.90). I tried it on Microsoft Edge (38.14393.1066.0) and Firefox (54.0.1, 32-bit) as well. – Hierogram

Works for me in Safari 11.1 (latest). – Tameika

Fast forward to 2021, this works in Edge 88.0.705.53, chrome 88.0.4324.104 and firefox 81.0.1. Great solution, thanks for this – Houck

this works in chrome 90.0.4430.212 and others also. Simply great solution, thanks for this @Bumptious – Cara

Good solution! Short notice is to change the border-radius to 50% then the cycle will more round – Kenyatta

A note for anyone using this, display: none on the input is a bad idea for accessibility as you can no longer focus the radio button via keyboard navigation. Instead, use the "visually hidden" trick. – Anticipant

Answer 5

You can achieve customized radio buttons in two pure CSS ways

1. Via removing standard appearance using CSS appearance and applying custom appearance. Unfortunately this was doesn't work in IE. Demo:

   input[type="radio"] {
     /* remove standard background appearance */
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     /* create custom radiobutton appearance */
     display: inline-block;
     width: 25px;
     height: 25px;
     padding: 6px;
     /* background-color only for content */
     background-clip: content-box;
     border: 2px solid #bbbbbb;
     background-color: #e7e6e7;
     border-radius: 50%;
   }
   
   /* appearance for checked radiobutton */
   input[type="radio"]:checked {
     background-color: #93e026;
   }
   
   /* optional styles, I'm using this for centering radiobuttons */
   .flex {
     display: flex;
     align-items: center;
   }

   <div class="flex">
     <input type="radio" name="radio" id="radio1" />
     <label for="radio1">RadioButton1</label>
   </div>
   <div class="flex">
     <input type="radio" name="radio" id="radio2" />
     <label for="radio2">RadioButton2</label>
   </div>
   <div class="flex">
     <input type="radio" name="radio" id="radio3" />
     <label for="radio3">RadioButton3</label>
   </div>

2. Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here (I see absolute positioning in most demos). Demo:

   *,
   *:before,
   *:after {
     box-sizing: border-box;
   }
   
   input[type="radio"] {
     display: none;
   }
   
   input[type="radio"]+label:before {
     content: "";
     /* create custom radiobutton appearance */
     display: inline-block;
     width: 25px;
     height: 25px;
     padding: 6px;
     margin-right: 3px;
     /* background-color only for content */
     background-clip: content-box;
     border: 2px solid #bbbbbb;
     background-color: #e7e6e7;
     border-radius: 50%;
   }
   
   /* appearance for checked radiobutton */
   input[type="radio"]:checked + label:before {
     background-color: #93e026;
   }
   
   /* optional styles, I'm using this for centering radiobuttons */
   label {
     display: flex;
     align-items: center;
   }

   <input type="radio" name="radio" id="radio1" />
   <label for="radio1">RadioButton1</label>
   <input type="radio" name="radio" id="radio2" />
   <label for="radio2">RadioButton2</label>
   <input type="radio" name="radio" id="radio3" />
   <label for="radio3">RadioButton3</label>

Salvation

Answer 6

Only if you are targeting webkit-based browsers (Chrome and Safari, maybe you are developing a Chrome WebApp, who knows...), you can use the following:

input[type='radio'] {
   -webkit-appearance: none;
}

And then style it as if it were a simple HTML element, for example applying a background image.

Use input[type='radio']:active for when the input is selected, to provide the alternate graphics

Update: As of 2018 you can add the following to support multiple browser vendors:

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Strang

appearance is labeled as an experimental technology: developer.mozilla.org/en-US/docs/Web/CSS/appearance – Abrahamsen

Worked like a charm! – Walter

Instead of using :active, you should use :checked to differentiate styling between 'selected' radio buttons. – Longinus

Answer 7

Try something like this:

#yes{
  border:2px solid white;
  box-shadow:0 0 0 1px #392;
  appearance:none;
  border-radius:50%;
  width:12px;
  height:12px;
  background-color:#fff;
  transition:all ease-in 0.2s;

}
#yes:checked{
  background-color:#392;
}
#no{
  border:2px solid white;
  box-shadow:0 0 0 1px #932;
  appearance:none;
  border-radius:50%;
  width:12px;
  height:12px;
  background-color:#fff;
  transition:all ease-in 0.2s;

}
#no:checked{
  background-color:#932;
}

<input id="yes" type="radio" name="s"><label for="yes">Yes</label></br>
<input id="no" type="radio" name="s"><label for="no">No</label>

There is less of code, it looks better and you don't need to play with :before , :after and position to reach the effect.

Theda

Worked for me! Thank you. – Handbill

Absolute genius! Seriously, programmers just love to overcomplicate things. Not you though – Lonni

Not working on Safari on iPhone – Empathy

Indeed it is not. The appearance is not supported in Safari<15.4 and Internet Explorer – Codon

Answer 8

you can use the checkbox hack as explained in css tricks

http://css-tricks.com/the-checkbox-hack/

working example of radio button:

http://codepen.io/Angelata/pen/Eypnq

input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}

Works in IE9+, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome anything.

Adulterant

I like this answer but the css-tricks.com .visually-hidden class is out-of-date. Today, I would use: .visually-hidden { display:none; } – Hatten

Answer 9

simple cross browser custom radio button example for you

.checkbox input{
    display: none;
}
.checkbox input:checked + label{
    color: #16B67F;
}
.checkbox input:checked + label i{
    background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
    background-size: 12px;
    position: relative;
    top: 1px;
    left: -2px;
}

<div class="checkbox">
  <input type="radio" name="sort" value="popularity" id="sort1">
  <label for="sort1">
        <i></i>
        <span>first</span>
    </label>

  <input type="radio" name="sort" value="price" id="sort2">
  <label for="sort2">
        <i></i>
        <span>second</span>
    </label>
</div>

https://jsfiddle.net/kuzroman/ae1b34ay/

Luvenialuwana

This is not working for bootstrap, can you pls update with bootstrap – Erwinery

The image sources(svgs) and fiddle are dead. Therefore, the snippet is not working. – Codon

Answer 10

Well to create extra elements we can use :after, :before (so we don’t have to change the HTML that much). Then for radio buttons and checkboxes we can use :checked. There are a few other pseudo elements we can use as well (such as :hover). Using a mixture of these we can create some pretty cool custom forms. check this

Hung

Answer 11

I builded another fork of @klewis' code sample to demonstrate some playing with pure css and gradients by using :before/:after pseudo elements and a hidden radio input button.

HTML:

sample radio buttons:
<div style="background:lightgrey;">
    <span class="radio-item">
        <input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
        <label for="ritema">True</label>
    </span>

    <span class="radio-item">
        <input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
        <label for="ritemb">False</label>
    </span>
</div>

:

CSS:

.radio-item input[type='radio'] {
    visibility: hidden;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 5px;
    padding: 0;
}
    .radio-item input[type=radio]:before {
        position: relative;
        margin: 4px -25px -4px 0;
        display: inline-block;
        visibility: visible;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px inset rgba(150,150,150,0.75);
        background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
        content: "";
    }
        .radio-item input[type=radio]:checked:after {
            position: relative;
            top: 0;
            left: 9px;
            display: inline-block;
            visibility: visible;
            border-radius: 6px;
            width: 12px;
            height: 12px;
            background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            content: "";
        }
            .radio-item input[type=radio].true:checked:after {
                background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            }
            .radio-item input[type=radio].false:checked:after {
                background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
            }
.radio-item label {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}

preview: https://www.codeply.com/p/y47T4ylfib

Ventriloquize

Answer 12

You should use the accent-color CSS property, which sets the accent color for user-interface controls such as inputs (radio buttons, checkboxes...) or progress bars and it's supported for most modern browsers.

input {
    accent-color: red;
}

document.querySelector("input[name=accent-color]").addEventListener("input", () => {
  document.documentElement.style.setProperty("--accent-color", event.target.value);
});

:root {
  --accent-color: red;
}

input,
progress {
  accent-color: var(--accent-color);
}

/* Other styles */
label {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .625rem;
}

label:first-child {
  font-size: 1.15rem;
  font-weight: bold;
}

input {
  flex: 0 0 auto;
  height: 1.25rem;
  width: 1.25rem;
}

input[type="color"] {
  width: 3rem;
}

input[type="range"] {
  width: 12.5rem;
}

<label>Change the accent color<input name="accent-color" type="color" value="#ff0000"></input></label><br>
<label><input name="radio" type="radio" checked></input>Radio button</label>
<label><input name="radio" type="radio"></input>Another radio button</label>
<label><input name="check" type="checkbox" checked></input>Checkbox</label>
<label><input name="range" type="range"></input>Range input</label>
<label><progress value="50" max="100"></progress>Progress bar</label>

Explicative

Answer 13

For those who prefer to start development with a minimal example, here's a simple custom radio button that doesn't depend on label:

[type="radio"] {
    visibility: hidden; /* hide default radio button */
  /* you may need to adjust margin here, too */
}
[type="radio"]::before { /* create pseudoelement */
    border: 2px solid gray; /* thickness, style, color */
    height: .9em; /* height adjusts with font */
    width: .9em; /* width adjusts with font */
    border-radius: 50%; /* make it round */
    display: block; /* or flex or inline-block */
    content: " "; /* won't display without this */
    cursor: pointer; /* appears clickable to mouse users */
    visibility: visible; /* reverse the 'hidden' above */
}

[type="radio"]:checked::before { /* selected */
  /* add middle dot when selected */
  /* slightly bigger second value makes it smooth */
  /* even more (e.g., 20% 50%) would make it fuzzy */
    background: radial-gradient(gray 36%, transparent 38%);
}

<br>
<input type="radio" name="example" id="one" value="one">
<label for="one">one</label>
<br>
<br>
<input type="radio" name="example" id="two" value="two">
<label for="two">two</label>

Milkweed

I recently had to use this approach for a project and Marcus's example above is the only one here that I found worked when there were more than two radios. – Marianamariand

Answer 14

You can use accent-color property in css to change background color of both checkbox and radio buttons.

input[type=radio] {
  accent-color: red;
}

Medicate

Answer 15

Simple , you can be used accent-color

View page source

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input[type=radio] {
            accent-color: red;
        }
    </style>
</head>
<body>
    <label for="css">Are you like to css</label>
    <input type="radio" id="css" value="css">
</body>
</html>

Deirdre

Answer 16

Try this css with transition:

Demo

$DarkBrown: #292321;

$Orange: #CC3300;

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:$DarkBrown;
}

input[type="radio"]:checked + label span{
     background-color:$Orange;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

Html :

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

Findley

Answer 17

This is not possible by native CSS. You'll have to use background images and some javascript tricks.

Unsearchable

Answer 18

As other said, there's no way to achieve this in all browser, so best way of doing so crossbrowser is using javascript unobtrusively. Basically you have to turn your radiobutton into links (fully customizable via CSS). each click on link will be bound to the related radiobox, toggling his state and all the others.

Jeth

Answer 19

For my use all I wanted to do was change the colour and nothing else, so I've taken the answer from @klewis and changed it to...

1. Make the radio the same as the browser default (Chrome in my case) using relative % and em instead of fixed px. Caveat: em is based on whatever the font-size of input[type=radio] is, which could be inherited. Adjustments to the values below may be necessary.
2. Keep accessibility functions (like an outline when focused) of the original radio button by not using display: none; and by applying :before and :after to the original radio instead of the label.

/* make default radio 'invisible' */
input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* make new radio outer circle */
input[type=radio]:before {
  content: " ";
  display: inline-block;
  position: relative;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  border: 1px solid grey;
  background-color: transparent;
}

/* change colour of radio outer circle when checked */
input[type=radio]:checked:before {
  border-color: green;
}

/* make new radio inner circle when checked */
input[type=radio]:checked:after {
  content: " ";
  display: block;
  position: absolute;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  top: 0.4em;
  left: 0.13em;
  background: green;
}

`

Noctilucent

Answer 20

This Worked for me well,

Simply add css attribute:

input[type="radio"]{accent-color: red;}

Here is the link for resource

Rainmaker

Make sure to format your code like this – Cellaret

Answer 21

The simple way is to use accent-color

The accent-color CSS property sets the accent color for user-interface controls generated by some elements

Browsers that support accent-color currently apply it to the following HTML elements:

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

An runnable example

body {
  display: grid;
  padding: 3rem 0;
}

.accent {
  accent-color: #30cc7e;
}

form {
  display: grid;
  grid-auto-columns: fit-content(50%);
  grid-template-areas: "a a";
  margin: auto;
  padding: 0;
  gap: 1rem;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: auto;
}

form section:first-child {
  color-scheme: light;
}
form section:last-child {
  color-scheme: dark;
}

fieldset {
  border-radius: 8px;
  color-scheme: light;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.dark {
  color-scheme: dark;
}

.dark fieldset {
  background: #100f33;
  border-color: #100f33;
  color: #fff;
}

.dark .accent {
  accent-color: hsla(180, 100%, 70%, 1);
}

h2 {
  margin: 0;
}

.notice {
  background: #fff9c4;
  border-radius: 6px;
  margin: 1.5rem auto;
  padding: 0.5rem;
  text-align: center;
}

@supports (accent-color: #fff) {
  .notice {
    display: none;
  }
}

<div class="notice">
  Your browser does not support the <code>accent-color</code> property.
</div>

<form action="">
  <fieldset>
    <h2>Checkboxes</h2>
    <div>
      <label for="checkbox">
        Default
      </label>
      <input id="checkbox" type="checkbox" checked>
    </div>
    <div>
      <label for="checkbox-accent">
        Accent
      </label>
      <input id="checkbox-accent" type="checkbox" class="accent" checked>
    </div>
  </fieldset>

  <fieldset>
    <h2>Radio</h2>
    <div>
      <input id="radio" type="radio" checked>
      <label for="radio">
        Default
      </label>
    </div>
    <div>
      <input id="radio-accent" type="radio" class="accent" checked>
      <label for="radio-accent">
        Accent
      </label>
    </div>
  </fieldset>

  <fieldset>
    <h2>Progress</h2>
    <div>
      <label for="progress">
        Default
      </label>
      <progress id="progress" min="0" max="100" value="50"></progress>
    </div>
    <div>
      <label for="progress-accent">
        Accent
      </label>
      <progress id="progress-accent" class="accent" min="0" max="100" value="50"></progress>
    </div>
  </fieldset>

  <fieldset>
    <h2>Range</h2>
    <div>
      <label for="range">
        Default
      </label>
      <input id="range" type="range">
    </div>
    <div>
      <label for="range-accent">
        Accent
      </label>
      <input id="range-accent" class="accent" type="range">
    </div>
  </fieldset>
</form>

Talkative

Answer 22

I changed the color and size of radio buttons. Try This

.radio-tile-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.radio-tile-group .input-container {
  position: relative;
  margin: 0.9rem;
}

.radio-tile-group .input-container .radio-button {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.radio-tile {
  border: 1px solid #eea236;
}

.radio-tile-group .input-container .radio-tile-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25px;
  font-size: 12px;
  border-radius: 5px;
  padding: 0.2rem;
  transition: transform 300ms ease;
  height: 25px;
}

@media (min-width: 375px) and (max-width: 812px) {
  .radio-tile-group .input-container .radio-tile {
    margin-inline: 18px;
  }
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile {
  border: 3px solid #2980b9;
  font-size: 12px;
  color: #797979;
  transform: scale(1.05, 1.05);
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile .icon svg {
  fill: white;
  background-color: #2980b9;
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile-edit {
  border: 3px solid black;
  /* font-size: 12px; */
  color: #797979;
  transform: scale(1.05, 1.05);
}

<label>Radio button colors:</label>
<br>
<div class="radio-tile-group">
  <div class="input-container">
    <label class="radio-tile-label" style="background-color: #b60205;border-radius: 5px;">
    <input type="radio" value="#b60205" class= "radio-button uncheckall" name="print_color">
     <div class="radio-tile-edit" style="background-color: #b60205;">
    </label>
    </div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #d93f0b; border-radius: 5px;">
  <input type="radio" value="#d93f0b" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color: #d93f0b;">
  </label>
  </div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #fbca04; border-radius: 5px;">
  <input type="radio" value="#fbca04" class= "radio-button uncheckall" name="print_color">
    <div class="radio-tile-edit" style="background-color: #fbca04;">
    </label>
</div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #0e8a16; border-radius: 5px;">
  <input type="radio" value="#0e8a16" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color: #0e8a16;">
  </label>
</div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #006b75; border-radius: 5px;">
  <input type="radio" value="#006b75" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color:#006b75">
  </label>
</div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #1d76db; border-radius: 5px;">
  <input type="radio" value="#1d76db" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color: #1d76db;">
  </label>
</div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #0052cc; border-radius: 5px;">
  <input type="radio" value="#0052cc" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color: #0052cc;">
  </label>
</div>
</div>
<div class="input-container">
  <label class="radio-tile-label" style="background-color: #757575; border-radius: 5px;">
  <input type="radio" value="#757575" class= "radio-button uncheckall" name="print_color">
  <div class="radio-tile-edit" style="background-color: #757575;">
  </label>
</div>
</div>
</div>

Adeno

Answer 23

It may be helpful to bind radio-button to styled label. Futher details in this answer.

Display

Answer 24

A clever way to do it would be to create a separate div with a height and width of -for example- 50px and then a radius of 50px lay this over your radio buttons...

Flatware

Answer 25

You can embed a span element in the radio input then select a color of your choice to be rendered when a radio input is checked. Check out the example below sourced from w3schools.

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>

Changing the background color at this code segment below does the trick.

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

Sourced from how to create a custom radio button

Bickel

Answer 26

If you are using react bootstrap Form.check you could do something like this

HTML

<Form.Check
type="radio"
id="Radio-card"
label={`check me out`}
name="paymentmethod"
value="card"
/>

SCSS

.form-check {
    display: flex;
    align-items: center;
    input[type="radio"] {
    -moz-appearance: none;
    appearance: none;
          
    width: 11px;
    height: 11px;
    padding: 1px;
    background-clip: content-box;
    border: 1px solid hotpink;
    background-color: white;
    border-radius: 50%;
    }
          
    input[type="radio"]:checked {
    outline: none;
    background-color: hotpink;
    border: 1px solid hotpink;
    }
    label {
    font-size: 14px;
    font-weight: 600;
    }
}

Widdershins

Answer 27

A simple fix would be to use the following CSS property.

input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}

Maxiemaxilla