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

StackOverflow https://stackoverflow.com/questions/1206960

  •  05-07-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

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

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

Другие советы

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

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

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

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

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

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

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

На самом деле с небольшим количеством 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/

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

Заменить

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

с

<img src="unchecked.gif">
<img src="checked.gif">
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top