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)

The example given does not even work in IE10 but I would say IE9 & IE10 @atmd — Rotan075, Jul 15 '15 at 13:39
I have code that makes custom radio buttons. I think the browser support may be as good as IE8 or maybe even earlier. It is not conventional because it is completely custom, like basically remaking the radio button in html, css, and javascript. The code isn't that hard. I will post it later today. — www139, Jul 15 '15 at 14:22

score 1 · Answer 1 · answered Jul 15 '15 at 13:52

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

score 1 · Accepted Answer · answered Jul 15 '15 at 13:56

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,

Is it still possible to make the dot for example 10x10 pixels and the input 20x20 or is that impossible? — Rotan075, Jul 15 '15 at 14:09
Sure...just play with it. The sizes I used are just for example. — Paulie_D, Jul 15 '15 at 14:12

nelek · Answer 3 · 2015-07-15T13:51:05.840

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

This does not match my requirements, like I said, I can not add any extra HTML objects. Therefore this would not work for me. Good example though. — Rotan075, Jul 15 '15 at 14:05
@Rotan075 Sorry... i misread that "without adding extra HTML" ... sorry again, my bad :( — nelek, Jul 15 '15 at 14:09

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

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.

edited May 23 '17 at 11:51

Community

1
1

answered Jul 15 '15 at 13:49

smnbbrv

23,502
9
78
109

according to the link yes – smnbbrv Jul 15 '15 at 13:56

score 0 · Answer 5 · answered Jul 15 '15 at 14:05

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>

This does not match my requirements, like I said, I can not add any extra HTML objects. Therefore this would not work for me. Good example though! — Rotan075, Jul 15 '15 at 14:13

kamoroso94 · Answer 6 · 2015-07-15T16:22:31.713

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.

score 0 · Answer 7 · answered Aug 01 '15 at 19:06

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

Custom style radiobuttons

7 Answers7