Change Background-Color of a Radio Button

Question

Is it possible to change the background color of a radio button input in Firefox/Chrome like in IE? (Without using images)

Run this in both IE(<9) and Firefox/Chr

Answer 1

To change the background color of a radio button input Only in IE

HTML

<input type="radio" name="custom">  
<input type="radio" name="custom">

CSS

input[type=radio] {
  width: 20px;
  height: 20px;
}
/* This will make the border gray when the button is not checked. */
input[type=radio]:not(:checked)::-ms-check {
  border-color: gray; 
}
input[type=radio]::-ms-check {
  border-color: red; /* This will make the border red when the button is checked. */
  color: red; /* This will make the circle red when the button is checked. */
}

Answer 2

The short answer is "no".

Even if you do manage to get something that works in one browser, browsers tend to handle form controls very differently, meaning it's nigh impossible to achieve cross-browser compatibility.

Disappointing, I know. Check out this article for more info: http://www.456bereastreet.com/archive/200409/styling_form_controls/

Just by the way, why do you want to change the background color? Generally a radio button background will just pick up the background color of its container.

Answer 3

I know this is an old question bit it still comes up quite high if you google the question so here is my solution.

Style a <label> element that is directly after the radio button.

HTML

<input type=radio name="colour" value="green" id="colour-green" /><label for="colour-green" ></label>
<input type=radio name="colour" value="red" id="colour-red" /><label for="colour-red" ></label>
<input type=radio name="colour" value="blue" id="colour-blue" /><label for="colour-blue" ></label>

CSS

input[type=radio]{
    display:none;
}
input[type=radio] + label{
    border: 1px solid black;
    background-color: red;
    border-radius: 50%;
    display: block;
    ...
}
input[type=radio]:checked + label{
    background-color: green;
}

Answer 4

Alternatively it is possible to change the border using CSS.

This is the input radio:

<input name="myinput" id="myinput" type="radio" value="1" class="highlighted" />

And this is the CSS:

.highlighted {
    outline:1px solid #F00; /* Firefox, Opera, Chrome, IE8+ */
    *filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000); /* IE6, IE7 */
}

Answer 5

input radio is just a circle, so you can change the style of the < a > or < div > tag like this:

Here