CSS псевдокласс :indeterminate

CSS псевдокласс :indeterminate выбирает элемент пользовательского интерфейса, который находится в неопределенном состоянии.

Псевдокласс:indeterminate задает стиль для флажков и переключателей, элементов progress.

Неопределенное состояние флажков может быть задано только через JavaScript. Переключатели и элементы progress могут быть установлены в HTML.

Версия

CSS3

Синтаксис

:indeterminate {
  css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      input:indeterminate {
      box-shadow: 0 0 2px 2px #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора indeterminate</h2>
    <form>
      <input type="checkbox" id="box"> Checkbox
      <script>
        var checkbox = document.getElementById("box");
        checkbox.indeterminate = true;
      </script>
    </form>
  </body>
</html>

В следующем примере вся группа находится в неопределенном состоянии, когда нет выбранного варианта:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      label {
      margin-right: .5em;
      position: relative;
      top: 1px;
      }
      input[type="radio"]:indeterminate + label {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :indeterminate</h2>
    <form>
      <input type="radio" name="option" value="yes" id="yes"> 
      <label for="yes">Yes</label>
      <input type="radio" name="option" value="no" id="no"> 
      <label for="no">No</label>
      <input type="radio" name="option" value="don't know" id="don't-know"> 
      <label for="don't-know">Don't know</label>
    </form>
  </body>
</html>

Поддержка браузера

39.0+ 12.0+ 51.0+ 10.1+ 26.0+




Похожие статьи