Radio button size

Setting width and height of radio button works in chrome but not in firefox? Can someone explain or help me? Thanks!

Here look
I copy your code

1 Like

Hey @ramzky!
Welcome to the Forum!

Can use please give your code?

Sizes fine in FF? As above, need to see code to see what’s happening and why it in’t working for you

1 Like

Which version of firefox do you use?

I use Firefox 84.0.1

84.0b7 for me, shouldn’t be a difference but possibly developer version has some changes that allow styling otherwise-unstyleable inputs?

Edit: try adding -moz-appearance: none; to the style and see if that makes a difference?

It disappear. I wonder what’s causing this

Add border back in, I should have said, appearance: none literally removes most of the built-in browser styles. The size looks correct though

There’s border and when I remove -moz-apperance: none; the border disappears too and the radio button shows again

input[type="radio"]  {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  height: 50px; /* or whatever */
  width: 50px; /* or whatever */
  border: 2px solid #999; /* or whatever */
  border-radius: 50%; /* make it round */
  transition: 0.2s all linear; /* just to make it change smoothly */

input[type="radio"]:checked {
  border: 10px solid #000; /* make it change visually when checked */

Thanks I guess I need to settle for custom radio buttons for now.