Geek asks and answers

Change background color of radio button

Is it possible to change the background color of the input radio buttons in Firefox / Chrome, as in IE? (Without using images)

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

input[type="radio"] {
  background: red;
}
<input type="radio" /> RadioButton
Run codeHide result

View in JSFiddle

+1
source share
4 answers

Alternatively, you can change the border using CSS.

This is the input radio:

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

And this is 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 */
}
+1
source

The short answer is no.

Even if you manage to get something that works in the same browser, browsers tend to handle form controls differently, which means it is almost impossible to achieve compatibility between browsers.

, . : http://www.456bereastreet.com/archive/200409/styling_form_controls/

, , ? .

+1

, , , Google, .

a <label>, .

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

- , <a> <div> , :

-5

More articles:


All Articles