it-swarm.com.ru

CSS3: непроверенный псевдокласс

Я знаю, что существует официальный псевдокласс CSS3 :checked, но есть ли псевдокласс :unchecked, и есть ли у них такая же поддержка браузера?

Ссылка на Sitepoint не упоминает ни одного, однако это whatwg spec (что бы это ни было) делает.

Я знаю, что тот же результат может быть достигнут при объединении псевдоклассов :checked и :not(), но мне все еще интересно:

input[type="checkbox"]:not(:checked) {
    /* styles */
}

Правка:

W3C рекомендует ту же технику

Не установленный флажок может быть установлен с помощью псевдокласса отрицания:

:not(:checked)
81
Web_Designer

:unchecked не определен в спецификациях селекторов или CSS UI уровня 3 и не появился на уровне 4 селекторов.

Фактически, цитата из W3C: взято из спецификации Selectors 4 . Поскольку Selectors 4 рекомендует использовать :not(:checked), можно предположить, что нет соответствующего псевдо :unchecked. Поддержка браузером :not() и :checked идентична, поэтому проблем не должно быть.

Это может показаться несовместимым с состояниями :enabled и :disabled, тем более что элемент не может быть ни ни включен, ни отключен (т.е. семантика полностью не применяется), однако, как представляется, нет никакого объяснения этой несоответствия.

(:indeterminate не считается, потому что элемент также не может быть ни проверен, ни проверен, ни неопределенен, потому что семантика не применяется.)

76
BoltClock

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

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

Я извиняюсь за то, что поднял старую ветку, но чувствовал, что она могла бы найти лучший ответ.

РЕДАКТИРОВАТЬ (03.03.2016):

Спецификации W3C заявляют, что :not(:checked) как их пример для выбора непроверенного состояния. Однако это явно неконтролируемое состояние, и эти стили будут применяться только к неконтролируемому состоянию. Это полезно для добавления стилей, которые необходимы только в непроверенном состоянии и должны быть удалены из проверенного состояния, если они используются в селекторе input[type="checkbox"]. Смотрите пример ниже для уточнения.

input[type="checkbox"] {
  /* Base Styles aka unchecked */
  font-weight: 300; // Will be overwritten by :checked
  font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
  /* Explicit Unchecked Styles */
  border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
  /* Checked Styles */
  font-weight: 900; // Use a bold font when checked
}

Без использования :not(:checked) в примере выше селектор :checked должен был бы использовать border: none; для достижения того же эффекта.

Используйте input[type="checkbox"] для базового стиля, чтобы уменьшить дублирование.

Используйте функцию input[type="checkbox"]:not(:checked) для явных непроверенных стилей, которые вы не хотите применять к проверенному состоянию.

23
Michael Stramel

Тем не менее, псевдо-класс: unchecked отсутствует, если вы используете псевдо-класс: флажок и одноуровневый селектор, который можно различать между двумя состояниями. Я полагаю, что все последние браузеры поддерживают псевдокласс: selected, вы можете найти больше информации на этом ресурсе: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

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

4
Jeff Wooden

Я справился с этим, переключив className метки в зависимости от условия. Таким образом, вам нужен только один ярлык, и вы можете иметь разные классы для разных состояний ... Надеюсь, это поможет!

0
Daniel Ram