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.

Answer 1

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.