How can I hide a checkbox in html?

Question

I want to hide a checkbox.
But also want that, when I click on label associated with corresponding checkbox, the checkbox should get checked/unchecked.

I also want that the checkbox MUST be able to be focused.

I am doing the following:

<div class="menuitem">     <label class="checkbox"><input type="checkbox" value="valueofcheckbox" style="display:none" checked="checked">Option Text</label> </div> 

The problem with above is, I am not able to make focus the checkbox when style="display:none".

To make checkbox focusable I am doing :

$('input', '.menuitem').focus(); 

IF POSSIBLE, how do I make the hidden checkbox focusable?

Answer 1

Try setting the checkbox's opacity to 0. If you want the checkbox to be out of flow try position:absolute and offset the checkbox by a large number.

HTML

<label class="checkbox"><input type="checkbox" value="valueofcheckbox" checked="checked" style="opacity:0; position:absolute; left:9999px;">Option Text</label> 

Answer 2

Elements that are not being rendered (be it through visibility: hidden, display: none, opacity: 0.0, whatever) will not indicate focus. The browser will not draw a focus border around nothing.

If you want the text to be focusable, that's completely doable. You can wrap the whole thing in an element that can receive focus (for example, a hyperlink), or allow another tag to have focus using the tabindex property:

<label tabindex="0" class="checkbox">   <input type="checkbox" value="valueofcheckbox" style="display:none" checked="checked" />Option Text </label> 

Fiddle

In this case, the <label> tag above is actually receiving focus and everything within it will have a focus border when it's in focus.

I do question what your goal is. If you're using a hidden checkbox to internally track some sort of state, you might be better off using a <input type="hidden" /> tag instead.