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>

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>

• javascript
• html
• css
• angular

• 1 In the 1st code-snippet you are rendering checkbox and making it appear like radio. Whereas in the 2nd code-snippet you're rendering radio and making it appear like checkbox. Seems to work fine. – Aakash Commented Aug 24, 2020 at 4:17
• When I am running it, it is not converting in both the case on my system(Browser used Firefox 80.0 (32-bit)) .Have you tried to run it?If it is working for you which browser you are using for it? – Amit Verma Commented Aug 24, 2020 at 5:15
• 1 Mozilla Firefox version 79 – Aakash Commented Aug 24, 2020 at 9:32

2 Answers 2

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>

If it worked before, it's probably a change in your version of FireFox 80.0 (32bit) or you used a 64bit version. I tested on FireFox 79.0 (64bit) and your css worked fine.

Mozilla says appearance (-moz-appearance, -webkit-appearance) is an experimental techonlogy. So use it with caution.

They mention: From version 62: this feature is behind the layout.css.webkit-appearance.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Check to see if this makes a difference.