CODEWITHSUNDEEP
javascripthtmlcss
codeofnode
codeofnode

Reputation: 18619

How can I hide a checkbox in html?

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?

Upvotes: 35

Views: 202309

Answers (6)

vsync
vsync

Reputation: 130274

input may have a hidden attribute:

label{ cursor:pointer; user-select:none; }
input:checked + span::before {
  content: 'un';
}
<label>
  <input type='checkbox' hidden/>
  <span>check</span>
<label>

Upvotes: 10

George Carlin
George Carlin

Reputation: 447

if you want your check box to keep its height and width but only be invisible:

.hiddenCheckBox{
    visibility: hidden;
}

if you want your check box to be invisible without any with and height:

.hiddenCheckBox{
    display: none;
}

Upvotes: 0

davidf
davidf

Reputation: 977

You need to add the element type to the class, otherwise it will not work.

.hide-checkbox { display: none }        /* This will not work! */
input.hide-checkbox { display: none }   /* But this will. */ 
<input class="hide-checkbox" id="checkbox" />
<label for="checkbox">Checkbox</label>

It looks too simple, but try it out!

Upvotes: -1

Victor
Victor

Reputation: 866

This two classes are borrowed from the HTML Boilerplate main.css. Although the invisible checkbox will be focused and not the label.

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

Upvotes: 12

Mike Christensen
Mike Christensen

Reputation: 91638

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.

Upvotes: 14

unblevable
unblevable

Reputation: 1316

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>

Upvotes: 28

Related Questions