Change Background-Color of a Radio Button

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/Chrome:

input[type="radio"] {
  background: red;
}

<input type="radio" /> RadioButton

View on JSFiddle

Solution 1:

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 */
}

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