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

Question

Я хочу скрыть 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 фокусируемый я делаю:

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

если возможно, как сделать скрытые checkbox фокусируемыми?

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

Answer 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" />.

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

Answer 4

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

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

Это выглядит слишком просто, но попробовать его!

Answer 5

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

.hiddenCheckBox{ 
    visibility: hidden; 
} 

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

.hiddenCheckBox{ 
    display: none; 
}