Резиновые флажки с CSS и Javascript

Question

Я создал простой Javascript, чтобы сделать флажок отображаемым, который скрывает флажок, и в основном просто извлекает фоновое изображение через CSS, чтобы отображать проверки/отменяет.

Этот HTML/CSS для скрытия этого флажка доступен? Я хочу быть настолько уступчивым, насколько это возможно, и я не уверен в скрытии и моем ярлыке. В настоящее время это, как это выглядит ..

CSS:

.checked:hover, .unchecked:hover 
    { 
     background-color: #242424; 
    } 
    .checked 
    { 
     background-image: url(check.bmp); 
     color: #ffb500; 
    } 
    .unchecked 
    { 
     background-image: url(unchecked.bmp); 
    } 

HTML:

<label for="cbAll" class="checked" id="lblAll"> 
<input id="cbAll" type="checkbox" name="cbAll" checked="checked"/> 
ALL </label> 

Answer 1

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

Оригинал HTML:

<input type="checkbox" id="check" /><label for="check">Toggle</label> 

Сгенерированный HTML:

<input type="checkbox" id="check" class="ui-helper-hidden-accessible" /> 
<label for="check" aria-pressed="false" class="[redacted]" role="button" aria-disabled="false"> 
    <span class="ui-button-text">Toggle</span> 
</label> 

Обратите внимание на конформацию к WAI-RIA specification, с правильным использованием атрибута role для обозначения роли, возложенной на label элемент, как кнопка (исходный элемент input скрыт и, таким образом, игнорируется программами чтения с экрана). Вы должны взглянуть на спецификации, если хотите знать, как создавать подобные вещи в доступном виде.

Answer 2

Посмотрите на http://lipidity.com/fancy-form/

Вы можете увидеть, как они это делают, и включить его в вашей собственной реализации.