CSS3: непроверенный псевдокласс - PullRequest
Новая
       5

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

87 голосов
/ 13 января 2012

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

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

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

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

Редактировать:

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

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

:not(:checked)

Ответы [ 5 ]

81 голосов
/ 19 марта 2012

:unchecked не определено в спецификации селекторов или пользовательского интерфейса CSS уровня 3, а также не появилось в селекторах уровня 4.

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

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

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

29 голосов
/ 21 мая 2015

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

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) для явных непроверенных стилей, которые вы не хотите применять к проверенному состоянию.

3 голосов
/ 13 января 2012

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

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

0 голосов
/ 13 июня 2017

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

0 голосов
/ 02 июля 2016 
<style>

input, span {
  background: red;
}

:indeterminate, :indeterminate + span {
  background: limegreen;
}
</style>

</head>

<body>

<input type="checkbox"> <span>Everything in this paragraph should have a green background.</span>


<script type="text/javascript">
    document.getElementsByTagName("input")[0].indeterminate = true;
</script>
...