Personalize "Radio" button in a HTML from - html

Question

Well, I can change the size of "Radio" using CSS but I cant quit the border and change the background color.
Here is my code:
<input type="radio" class="textColoPgE1" id="textColoPgE" name="textColoPgE" value="col1">
And the CSS:
.textColoPgE1
{
background-color: blue;
width: 20px;
height: 20px;
border: none;
}
How to personalize my "Radio" buttons? I hope you have a solution.
Thank you

Answer 1

You need to make a fake radio button and hide the (browser) default one to make it work. See the example below. First it's a blue button, but after it's been clicked (and checked), it's red.
The label:before will be the container where your fake radio button will show up.
/* Hide the radio button */
input[type=radio] {
display: none;
}
/* We style the label */
.textColoPgE1-label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
}
.textColoPgE1-label:before {
content: "";
display: block;
width: 20px;
height: 20px;
top: 0;
position: absolute;
background-color: blue;
left: 0;
border-radius: 50%;
}
/* We style the checked item */
.textColoPgE1:checked + .textColoPgE1-label:before {
background-color: red;
}
<input type="radio" class="textColoPgE1" id="textColoPgE" name="textColoPgE" value="col1">
<label for="textColoPgE" class="textColoPgE1-label">Radio button</label>

Answer 2

You have here a great example of what you need to do to make your own radio button style:
http: //codepen.io/mitchmc/pen/pebIx
Basically, you need to turn of the button and style the label.
I searched for solutions for the same issue and found this very clear and helpful explanation: http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/