Custom style radiobuttons - html

Question

I want to style my radio buttons so that that black dot inside the circle is for example red.
There are several examples available on the internet like this one: JSFIDDLE. The thing with this example is that it does not work in Internet Explorer.
Another point that makes my situation harder is that I can not, due to implementation requirements, add any other html objects to the following code:
<span class="custom-radio">
<input id="id4" type="radio" name="id_test" value="">
<label for="id4">No</label>
</span>
My question is: how can I create a custom radiobutton without adding extra HTML to the code above and still make it work in most browsers (IE, FF, Chrome)

Answer 1

You can hide the input itself with display:none and the use a pseudo-element on the label
input[type='radio'] {
display: none;
}
input[type='radio'] + label {
position: relative;
line-height: 1em;
}
input[type='radio'] + label:before {
content: '';
width: .5em;
height: .5em;
border-radius:100%;
margin-right: .5em;
display: inline-block;
background: red;
vertical-align: middle;
box-shadow: 0 0 0 .1em white, 0 0 0 .2em black;
}
input[type='radio']:checked + label:before {
background: green;
vertical-align: middle;
}
<span class="custom-radio">
<input id="id4" type="radio" name="id_test" value=""/>
<label for="id4">No</label>
</span>
After that it's just a matter of styling the pseudo-element to taste,

Answer 2

for something like changing the colour of the tick/ball you can use ::before:
input:checked ~ label::before{
content: "";
background: #F90 none repeat scroll 0% 0%;
width: 8px;
height: 8px;
position: absolute;
border-radius: 20px;
left: 7px;
top: 5px;
}
here's a fiddle
n.b. You'd be positioning the ::before element, so this would need tweeking to the correct position when used in your application

Answer 3

You cannot do that in IE because it does not allow you to use :before on input elements, at least according to this answer. I think the only thing you can do in your situation is to try adding :before on the label and position it over the checkbox.

Answer 4

Try this link
Styling Radio Buttons with CSS
Update : code (copy/past from above link):
<input id="choice-a" type="radio" name="g" />
<label for='choice-a'>
<span><span></span></span>
Choice A
</label>
input[type="radio"] {
opacity: 0;
position: absolute;
}
/* Matches the direct descendant of a label preceded by a
radio button */
input[type="radio"] + label > span {
position: relative;
border-radius: 14px;
width: 20px;
height: 20px;
background-color: #f0f0f0;
border: 1px solid #bcbcbc;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
margin: 0 1em 0 0;
display: inline-block;
vertical-align: middle;
}
/* Matches the direct descendant of a label preceded by a
checked radio button */
input[type="radio"]:checked + label > span {
background: linear-gradient(#a0e5f8, #75c7dc);
background: -webkit-linear-gradient(#a0e5f8, #75c7dc);
border-color: #41a6bf;
box-shadow: 0px 1px 2px rgba(65, 166, 191, 0.9) inset;
}
/* Matches a span contained by the direct descendant
of a label preceded by a checked radio button */
input[type="radio"]:checked + label > span span {
display: inline-block;
width: 8px;
height: 8px;
position: absolute;
left: 6px;
top: 6px;
border-radius: 5px;
border: none;
background: #167c95;
box-shadow: 0px 1px rgba(255, 255, 255, 0.3);
}
input[type="radio"]:focus + label > span {
box-shadow: 0px 0px 6px rgba(63, 165, 190, 1);
}
Fiddle example

Answer 5

Simply use a combination of hidden radio input elements and styled span elements wrapped in label elements, styled accordingly:
input[type=radio] {
display: none;
}
span {
border-radius: 100%;
height: 20px;
width: 20px;
display: inline-block;
border: 1px solid;
position: relative;
}
input[type=radio]:checked + span:before {
content: '';
position: absolute;
height: 50%;
width: 50%;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
background: green;
border-radius: 100%;
}
<label>
<input type="radio" name="myRadio" />
<span></span>Item 1
</label>
<label>
<input type="radio" name="myRadio" />
<span></span>Item 2
</label>
<label>
<input type="radio" name="myRadio" />
<span></span>Item 3
</label>

Answer 6

You cannot change the properties of radio buttons or checkboxes, but you can simulate them. Keep your HTML the same, and add this to your CSS.
.custom-radio input[type=radio] {
display:none;
}
.custom-radio label {
display:inline-block;
}
.custom-radio label:before {
content:"";
display:inline-block;
width:16px;
height:16px;
border-radius:50%;
background:url("http://s17.postimg.org/p1q2imsln/radio.png");
background-position:0% 0%;
}
.custom-radio label:hover:before {
background-position:0% 100%
}
.custom-radio input[type=radio]:checked~label:before {
background-position:100% 0%;
}
.custom-radio input[type=radio]:checked~label:hover:before {
background-position:100% 100%;
}
Simply provide an image that follows the template in the link that has red radio buttons.

Answer 7

Why even use the input[type="radio"] element at all? You can recreate in in html, css, and javascript and offer better browser support than any crazy css :before, :after stuff. Here is the code and a working jsfiddle:
Here is a link to the fiddle: https://jsfiddle.net/www139/ba5jn2e6/19/
Hope this helps anyone else with the issue. I experienced the same dilemma, so I decided to create it from scratch!
window.onload = function(){
var radioButtonGroups = document.getElementsByClassName('radioGroupContainer');
for(var i = 0; i != radioButtonGroups.length; i++)
{
var radioButtons = radioButtonGroups[i].getElementsByClassName('radioButtonContainer');
for(var i = 0; i != radioButtons.length; i++)
{
radioButtons[i].onclick = function(){
var value = this.children[0].getAttribute('name');
for(var i = 0; i != radioButtons.length; i++)
{
radioButtons[i].children[0].setAttribute('class','radioButtonDot');
}
this.children[0].setAttribute('class','radioButtonDotActive');
this.parentNode.setAttribute('name',value);
};
}
}
};
/*
* Created by William Green.
* Questions or comments? Email william.green#protonmail.com
* I would appreciate credit for this code if you use it; but it is not required.
* Last updated July 26, 2015
* Created July 26, 2015
*
*/
.radioButtonContainer {
background-color:#eee;
padding:5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:table;
margin-top:5px;
margin-bottom:5px;
}
.radioButtonContainer .radioButtonDot {
width:16px;
height:16px;
background-color:transparent;
border:1px solid #000;
display:inline-block;
vertical-align:middle;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
-o-transition:all .5s ease;
-moz-transition:all .5s ease;
-webkit-transition:all .5s ease;
-ms-transition:all .5s ease;
transition:all .5s ease;
}
.radioButtonContainer .radioButtonDotActive {
width:16px;
height:16px;
background-color:#1396DE;
border:1px solid transparent;
display:inline-block;
vertical-align:middle;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
-o-transition:all .5s ease;
-moz-transition:all .5s ease;
-webkit-transition:all .5s ease;
-ms-transition:all .5s ease;
transition:all .5s ease;
}
.radioButtonContainer .radioButtonLabel {
background-color:transparent;
display:inline-block;
vertidal-align:middle;
border:0;
}
<div class="radioGroupContainer" id="radioChoicesOne">
<div class="radioButtonContainer">
<div class="radioButtonDot" name="optionOne"></div>
<input type="button" class="radioButtonLabel" value="Option One">
</div>
<div class="radioButtonContainer">
<div class="radioButtonDot" name="optionTwo"></div>
<input type="button" class="radioButtonLabel" value="Option Two">
</div>
<div class="radioButtonContainer">
<div class="radioButtonDot" name="optionThree"></div>
<input type="button" class="radioButtonLabel" value="Option Three">
</div>
</div>
<div id="radioButtonGroupOneValue"></div>
<input type="button" value="Get radio button value..." onclick="document.getElementById('radioButtonGroupOneValue').innerHTML = document.getElementById('radioChoicesOne').getAttribute('name');">