[html] How do I change the color of radio buttons?

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?

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;
}

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.

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

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

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

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>

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

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.

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 for Desktop (but works in IE for Windows Phone). Demo:

   _x000D_

   _x000D_

   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;
   }

   _x000D_

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

   _x000D_

   _x000D_
   _x000D_

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:

   _x000D_

   _x000D_

   *,
   *: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;
   }

   _x000D_

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

   _x000D_

   _x000D_
   _x000D_

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

simple cross browser custom radio button example for you

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

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

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

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

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

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

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.

A quick fix would be to overlay the radio button input style using :after, however it's probably a better practice to create your own custom toolkit.

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

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