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?

https://codepen.io/DanielCouper/pen/XWjZjdr

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.