CODEWITHSUNDEEP
cssradio-buttonbackground-color
vpascoal
vpascoal

Reputation: 278

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

Upvotes: 6

Views: 52419

Answers (8)

bb0143sbw
bb0143sbw

Reputation: 11

First, you need to disable the default styles provided by the browser. Then you can change the background color.

    input[type="radio"] {
     -webkit-appearance: none; /* For WebKit (Chrome, Safari, Opera) browsers */
     -moz-appearance: none; /* For Mozilla Firefox */
     appearance: none; /* For standard browsers */

     background: red; /* Change the background color */

}

Upvotes: 0

Malik Omonov
Malik Omonov

Reputation: 41

Try this:

.your-class { accent-color: red; mix-blend-mode: multiply; }

Upvotes: 1

Emmanuel Chikwendu Onah
Emmanuel Chikwendu Onah

Reputation: 598

Add this attribute to your radio input selector

input[type="radio"]{
  accent-color:green;
}

Upvotes: 8

tituskalai
tituskalai

Reputation: 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. */
}

Upvotes: 0

Jonathan Hodgson
Jonathan Hodgson

Reputation: 373

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

Upvotes: 0

Luke
Luke

Reputation: 5652

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.

Upvotes: 1

Valerio Gentile
Valerio Gentile

Reputation: 1100

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

Upvotes: 1

Maidot
Maidot

Reputation: 386

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

Here

Upvotes: -7

Related Questions