Как скрыть флажок в html?

Я хочу скрыть checkbox.
Но также хочу, чтобы, когда я нажимаю на метку, связанную с соответствующим checkbox, checkbox должен быть отмечен/не отмечен.

Я также хочу, чтобы checkbox ДОЛЖЕН быть сфокусированным.

Я делаю следующее:

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

Проблема с выше, я не могу сделать фокус checkbox, когда style="display:none".

Чтобы сделать checkbox focusable, я делаю:

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

ЕСЛИ ВОЗМОЖНО, как сделать скрытый checkbox настраиваемый?

Ответы

Ответ 1

Попробуйте установить непрозрачность флажка на 0. Если вы хотите, чтобы флажок был вне потока, попробуйте position:absolute и установите флажок большим числом.

HTML

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

Ответ 2

Элементы, которые не отображаются (через visibility: hidden, display: none, opacity: 0.0, что угодно) не укажут фокус. Браузер не будет рисовать границу фокуса вокруг ничего.

Если вы хотите, чтобы текст был настраиваемым, это полностью выполнимо. Вы можете обернуть все это в элемент, который может получить фокус (например, гиперссылку), или позволить другому тегу иметь фокус, используя свойство tabindex:

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

Fiddle

В этом случае тег <label> выше на самом деле получает фокус, и все внутри него будет иметь фокусную границу, когда он находится в фокусе.

Я задаюсь вопросом, какова ваша цель. Если вы используете скрытый флажок для внутренней отслеживания какого-либо состояния, вам может быть лучше использовать тег <input type="hidden" />.

Ответ 3

Эти два класса заимствованы из HTML Boilerplate main.css. Хотя невидимый флажок будет сфокусирован, а не ярлык.

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

Ответ 4

если вы хотите, чтобы ваш флажок сохранял его высоту и ширину, но только был невидим:

.hiddenCheckBox{
    visibility: hidden;
}

если вы хотите, чтобы ваш флажок был невидимым без каких-либо ограничений и высоты:

.hiddenCheckBox{
    display: none;
}

Ответ 5

Вам нужно добавить тип элемента в класс, иначе он не будет работать.

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