CODEWITHSUNDEEP
javascripthtmlcssangular
Amit Verma
Amit Verma

Reputation: 173

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

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>

Upvotes: 4

Views: 5499

Answers (2)

Alfred
Alfred

Reputation: 684

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>

Upvotes: 3

Jamal
Jamal

Reputation: 422

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.org 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.

Upvotes: 1

Related Questions