Use a radio button and make it hidden as well

Question

Is there any way to use a radio button and make it hidden as well?

I am trying to store a value inside 4 automatically (JSP) generated radio buttons. I need to place one more radio button which will hold some default value but it should be hidden from user. Is there any way for this?

Answer 1

You should avoid using display:none or visibility:hidden on form field elements because this will have a negative impact on accessibility. Users who are navigating your website via the keyboard (no mouse) will not be able to tab between form elements and check/uncheck them. You could try using the following instead:

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;

Update: Due to a known bug in Firefox, the radio button's border and dot are still visible when appearance: none has been applied. Setting the opacity to zero instead seems to be working for me:

opacity: 0;