Custom style radiobuttons

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

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');">

Answer 2

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 3

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 4

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 5

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 6

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 7

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.