Radio button size

HTML-CSS
1

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

5
51273×881 27.9 KB

Here look
I copy your code

1 Like
2

Hey @ramzky!
Welcome to the Forum!

Can use please give your code?

3

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
4

6
61716×732 52.4 KB

5

Which version of firefox do you use?

6

I use Firefox 84.0.1

7

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?

8

It disappear. I wonder what’s causing this

7
71280×738 27.6 KB

9

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

10

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

8
8864×647 21.2 KB

11 
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 */
}
12

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