JSFiddle : Shading radio button a different color

Question

I am trying to change the background color of my radio button so that my whole button itself looks blue.

This is the html code :

 <div class="col-sm-6" id="bcolor"> 
 <center><label class="blue"><input type="radio" id="b1" name="toggle" ><span 
 </span></label> </center>
 </div>

and these are the css styles I've tried and none of them seem to work :

input[type="radio"]
{
background-color : #5499C7;
}

input[type="radio"] + label
{
background-color : #5499C7;
}

input[type="radio"] +label.blue
{
background-color : #5499C7;
}

input#b1
{
background-color : #5499C7;
}

It would be great if someone could tell me what I'm missing.

The link is this : https://jsfiddle.net/Shreyav/vxo60wp5/84/show/ — SH_V95, Aug 23 '17 at 22:14
Possible duplicate of [How to change style of radio and checkbox input](https://stackoverflow.com/questions/25793716/how-to-change-style-of-radio-and-checkbox-input) — Dekel, Aug 23 '17 at 22:16
none of the solutions work. the 'background-color' property alone dosen't work — SH_V95, Aug 23 '17 at 22:25

score 1 · Answer 1 · answered Aug 24 '17 at 03:07

Styling radio-buttons is not difficult, but you will need to use other element, most likely label, obvious choice so that you don't need javascript to handle click. It will look like radio-button, and radio-button itself will be hidden. The principle I shoed in snippet. Hope you will be able to reproduce it with your code. Need explanation of CSS or is it self-explanatory enough?

input {
  position: absolute;
  left: -10000px;
  top: 0;
  height: 0;
  width: 0;
  visibility: hidden;
}
label {
  height: 34px;
  width: 34px;
  border-radius: 17px;
  background-color: whitesmoke;
  border: 1px solid silver;
  position: relative;
  display: block;
}
input:checked + label {
  background-color: #5499C7;
}
input:checked + label:before {
  display: inline-block;
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
  background: silver;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

<input type="checkbox" id="id1"/>
<label for="id1"></label>

score 1 · Accepted Answer · answered Aug 24 '17 at 03:14

input[type="radio"] + label
{
background-color : #5499C7;
height:15px;
width:15px;
display:inline-block;
vertical-align:text-top;
border-radius:50%;
}
input[type="radio"]:checked +label{
  background-color: red;
}

<div class="col-sm-6" id="bcolor"> 
   <center>
     <input type="radio" id="b1" name="toggle" >
     <label class="blue"></label>
   </center>
 </div>

You Can Try Something Like this.

The Problem in your code is that, you wrapped the input[radio] in the label tag and you are using the sibling selector + in CSS, which doesn't work.

JSFiddle : Shading radio button a different color

2 Answers2