Need to convert Checkbox to look like radion button using css Apprearace property

Question

It seems like appearance property is being updated in css3.I used to work with below code 1 month ago and it was working fine. But now appearance property is not converting checkbox to radio button. I have tried it on several browsers but no luck.

Can anyone please let me know why it is not working now? and provide me the better solution. SO my checkbox just look like radio button.

input[type="checkbox"] {
  -webkit-appearance: radio; /* Chrome, Safari, Opera */
  -moz-appearance: radio;    /* Firefox */
  -ms-appearance: radio;     /* not currently supported */
}

<label><input type="checkbox" name="checkbox"> Radio button 1</label>
<label><input type="checkbox" name="checkbox"> Radio button 2</label>

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
  -ms-appearance: checkbox;     /* not currently supported */
}

<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

Answer 1

Most of the CSS appearance property other than none and auto will not be supported in all the newer versions of major browsers. This is to preserve the original semantics of the widgets across browsers.

W3 Reference

The only way to convert your checkboxes into "radio buttons" now is to manually override the default css styling of the element with your custom css.

Something like this:

input[type="checkbox"]{
  visibility: hidden;
  position: absolute;
}
input[type="checkbox"] + label:before{
  height:12px;
  width:12px;
  margin-right: 2px;
  content: " ";
  display:inline-block;
  vertical-align: baseline;
  border:1px solid #777;
}
input[type="checkbox"]:checked + label:before{
  background-color: black;
}
input[type="checkbox"] + label:before{
  border-radius:50%;
}

<input type="checkbox" name="checkbox" id="01"><label for="01">Radio button 1</label>
<input type="checkbox" name="checkbox" id="02"><label for="02">Radio button 2</label>