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?

@KnowHowSolutions Erm... say that again, slowly? *REMOVES* it from the DOM? Really? — Niet the Dark Absol, Jul 31 '13 at 20:02
You want it "hidden" but you also want it to receive "focus" and get checked/unchecked? What are you trying to accomplish with all this verbose contradiction? Surely, there's a better way... try `` to store/send whatever it is. — Sparky, Jul 31 '13 at 20:19
maybe use `some text` type 'name' attribute of checkbox in 'for' attribute of label — Max Leps, Jul 31 '13 at 20:20
@Sparky : can u please let me know the better way, that fullfil my needs. — codeofnode, Jul 31 '13 at 20:29
A better way to do what? You never explained the purpose of all this? (See last paragraph of Mike Christensen's answer). — Sparky, Jul 31 '13 at 20:31

unblevable · Accepted Answer · 2013-07-31T20:21:09.890

27

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>

edited Jul 31 '13 at 20:21

answered Jul 31 '13 at 20:04

unblevable

1,296
10
14

8

This would be more like `visibility: hidden` than `display: none` though. – Mike Christensen Jul 31 '13 at 20:07
I updated your fiddle; the solution is sloppy, but focus and checking work. [fiddle](http://jsfiddle.net/unblevable/fwCkf/) – unblevable Jul 31 '13 at 20:18
Not that visibility:hidden will take it's space. – Dhanuka777 Oct 26 '16 at 05:48

Mike Christensen · Answer 2 · 2013-07-31T20:24:36.940

14

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.

edited Jul 31 '13 at 20:24

answered Jul 31 '13 at 20:02

Mike Christensen

88,082
50
208
326

the hidden checkbox is still not focusable in my work... can u please edit n save the fiddle to actually show the hidden checkbox focusable? – codeofnode Jul 31 '13 at 20:17
2

You can't make a hidden element focusable. No matter what. The browser won't draw a focus ring around *nothing*. – Mike Christensen Jul 31 '13 at 20:20
if that is true, there is no need for tabindex.. the result would be same even without tabindex=0 – codeofnode Jul 31 '13 at 20:26
You can add `label:focus{outline:1px solid black}` to your CSS. – Niet the Dark Absol Jul 31 '13 at 20:28
@Koka, what are you really trying to accomplish here? Your specifications are nothing but an exercise in contradiction. Focus all of your attention and energy to this answer's very last paragraph. – Sparky Jul 31 '13 at 20:28
@Koka - Adding `tabindex` makes the *label* tag focusable, not the hidden `` tag. – Mike Christensen Jul 31 '13 at 20:30
i am trying to make my own dropdown using div and inside i have so many labels with input checkbox to find if checked or not. – codeofnode Jul 31 '13 at 20:35
i dont want user find a checkbox visible.. to get look and feel of normal dropdown. i also want when dropdown div opens the first item input checkbox (that is hidden) automatically get focused. (for sake of keyboard handling) – codeofnode Jul 31 '13 at 20:36
@Koka, if the user never sees the `checkbox` then I don't understand why you'd want to use a `checkbox`. Do you know about `` elements? – Sparky Jul 31 '13 at 20:36
if i use type=hidden will there exist a checkbox?? – codeofnode Jul 31 '13 at 20:37
btw checkbox is for internal (hidden) use TO FIND if the item is selected. – codeofnode Jul 31 '13 at 20:38
@Koka, of course not. Why do you want to use a `checkbox`, when a `checkbox` is never seen? – Sparky Jul 31 '13 at 20:38
check my above comment plz – codeofnode Jul 31 '13 at 20:39
@Koka - Yea, if it were me, I'd make the `` tags focusable, and call `.focus()` on the *label*, not the *input*. Or, maybe just make each option an `` tag (which can receive focus by default) and trap the `click` event to toggle the checked state. – Mike Christensen Jul 31 '13 at 20:39
@Koka, if the `checkbox` is only for "internal" hidden use, then do yourself a huge favor and research the proper usage of ``. – Sparky Jul 31 '13 at 20:39
@Koka - Using a hidden checkbox is fine to *internally* track which options are checked or not. However, you can't use that *same tag* for focus and tabbing. You need to handle that aspect through another tag, such as `` or ``. – Mike Christensen Jul 31 '13 at 20:41
1

i also want it to be multiselect dropdown.. so i have to use checkbox.. i also use some css to display the selected items in case of multiselect dropdown.. but not showing the checkbox to end user.. Is there a way to achieve the same without loosing my checkbox..?? – codeofnode Jul 31 '13 at 20:41
your answer and comments are fair enough make your answer acceptable. But just a kind of extra help, can u help me out from this problem? – codeofnode Jul 31 '13 at 20:46
@Koka - All this is perfectly fine. Using a hidden `` tag (be it a `checkbox` or `hidden` type) is a reasonable approach. The thing you *can't* do is set the focus to a hidden element. You need to set the focus to something else. – Mike Christensen Jul 31 '13 at 20:46

Victor · Answer 3 · 2013-07-31T21:36:43.317

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;
}

vsync · Answer 4 · 2021-04-05T12:28:31.320

7

`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>

edited Apr 05 '21 at 12:28

answered Jun 29 '20 at 10:21

vsync

118,978
58
307
400

score 0 · Answer 5 · edited Aug 13 '18 at 18:40

0

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;
}

edited Aug 13 '18 at 18:40

Luke Taylor

8,631
8
54
92

answered Jul 23 '16 at 08:59

George Carlin

447
5
22

1

Both ways the checkbox is not focusable, don't use this. – Fabian von Ellerts Aug 27 '19 at 09:38

score -1 · Answer 6 · answered May 31 '16 at 22:49

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!

How can I hide a checkbox in html?

6 Answers6

`input` may have a hidden attribute:

Linked

How can I hide a checkbox in html?

6 Answers6

input may have a hidden attribute:

Linked

`input` may have a hidden attribute: