Setting the border and background color on the switch (compatible with Firefox, Chrome, Safari)

Question

How to set borders and background color around radio buttons in Firefox, Safri and Chrome ?

I know that it only works with IE.

Below is IE capture with red borders + red background.

Below is a Chrome capture with red borders + a red background.

As you can see, borders + background are not displayed.

Here is my css:

.input-validation-error { border: 1px solid #ff0000; background-color: #ffeeee; } 

Thanks.

Answer 1

since these are browser system objects, it is not recommended or even possible to style them only with CSS. there are many plugins and other solutions outside to fix a problem like my favorite:

use backgroundimages in divs with different classes (selected and unselected) to simulate radio buttons or checkboxes. add / remove hiddens input types dynamically through javascript or jquery if one of these "buttons" is clicked.

Answer 2

Try it!
HTML:

 <label for="x" class="radio-off"> <input type="radio" value="example" name="x" id="ex" class="ex"> label_text </label> 

CSS

  label { background:url(img/radio.png") no-repeat; } input { position:relative; left:-999em; } label.radio-on { background-position:0 -10px; } 

and simple onclick JS action to change label class
With this device you can tune your radio stations and checkboxes as you wish