Как установить CSS для отключенных флажков?

Question

Я бы хотел изменить CSS для отключенных флажков в сетке (их слишком трудно увидеть пользователям). Какой простой способ сделать это?

Мои предпочтения в используемых технологиях (в порядке убывания):
CSS
JavaScript
JQuery
Другое

Answer 1

Я бы предложил изменить цвет фона (background-color формы / набора полей) и посмотреть, сможете ли вы придумать лучший контраст. Если вы просто хотите изменить цвет отключенных (невыбираемых?) Флажков, вы можете попробовать:

input[disabled] {
...
/* CSS here */
...
}

Но если они по какой-то причине отключены, они, конечно, не должны быть заметно видны? Цель, чтобы они были серыми, это, конечно, чтобы избежать путаницы между активными / включенными и неактивными / отключенными элементами формы?

Answer 2

Оставьте флажок включенным, но затем добавьте onfocus=this.blur() к флажку, чтобы его нельзя было щелкнуть.

Или, если вы используете ASP.net (как вы говорите в своем комментарии), оставьте флажок включенным и добавьте следующее в событие Page.Load:

CheckBox1.Attributes.Add("onclick", "return false;");

Answer 3

Мне повезло с несколькими библиотеками JS, чтобы сделать работу. Конечно, мое требование состояло в том, чтобы ящики выглядели совсем иначе, чем стандартный флажок. Следующая библиотека даже соответствует 508.

Стилизованные элементы управления формой

Answer 4

input:disabled {} работает для всех браузеров, кроме - как вы уже догадались - IE. Для IE, я думаю, вам придется использовать библиотеку JS.

Answer 5

На самом деле с небольшим количеством CSS3 вы можете смоделировать очень упрощенное решение. Вам всегда нужно будет подумать, какую поддержку вы хотите предложить. Но если вам хорошо работать с современными браузерами, просто попробуйте.

Вот HTML

<label>
    <input type="checkbox" name="test" />
    <span>I accept terms and cons</span><br><br>
    <button>Great!</button>
</label>

Вот CSS

button { display: none}
:checked ~ button {
    font-style: italic;
    color: green;  
    display: inherit;
}

А вот и ДЕМО http://jsfiddle.net/DyjmM/

Answer 6

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

Заменить

<input type="checkbox" disabled>
<input type="checkbox" disabled checked>

с

<img src="unchecked.gif">
<img src="checked.gif">

Answer 7

В основном вам нужно прикрепить событие onclick к div, p или любому другому элементу, используемому для сетки, а затем перенести проверенное значение в скрытый элемент, связанный с этим полем в сетке. что очень тривиально, если используется javascript - отметьте jquery, чтобы добавить событие onclick для любого элемента. если щелкнуть, установите значение = 1 для скрытого элемента.