JSFiddle : Shading radio button a different color - css

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.

Answer 2

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>