CODEWITHSUNDEEP
htmlcsscheckboxradio-button
user3220037
user3220037

Reputation: 9

Radio button display on Chrome

I styled a radio button to look like a checkbox with the following:

input[name="radio1"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
-ms-appearance: checkbox;     /* not currently supported */
-o-appearance: checkbox;      /* not currently supported */

}

Now when I visit that page in Chrome, it fills them in with blue like this:

blue box

Any ideas how to fix?

Upvotes: 0

Views: 1509

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

Styling those elements cross-browser is a painful experience. I would style a label instead and hide the default input. Then you can style the label however you want using normal CSS.

[type="radio"] {
  display: none;
}
[type="radio"] + label:before {
  content: '\2610';
  display: inline-block;
  font-size: 5em;
}
[type="radio"]:checked + label:before {
  content: '\2611';
}
<input type="radio" id="foo" name="radio">
<label for="foo"></label>
<input type="radio" id="foo2" name="radio">
<label for="foo2"></label>

Upvotes: 1

Related Questions