логотип PurpleSchool
логотип PurpleSchool

Псевдокласс indeterminate в CSS. Полное руководство с примерами

Автор

Дмитрий Нечаев

Псевдокласс :indeterminate в CSS используется для стилизации элементов формы, находящихся в неопределённом состоянии. Это касается чекбоксов, радиокнопок и прогресс-баров. Такое состояние означает, что элемент не находится ни в состоянии "выбран", ни в состоянии "не выбран". В этой статье мы подробно рассмотрим псевдокласс :indeterminate, его применение и приведём примеры использования для различных ситуаций.

Что такое псевдокласс :indeterminate?

Псевдокласс :indeterminate применяется к элементам формы, находящимся в неопределённом состоянии. Это состояние может быть полезно для отображения промежуточного статуса, например, при частично выбранных элементах или прогрессе, который не может быть точно измерен.

Пример базового использования :indeterminate

input:indeterminate {
  /* Стили для элементов в неопределённом состоянии */
}

Пример использования псевдокласса :indeterminate для изменения стилей чекбоксов в неопределённом состоянии:

input:indeterminate {
  background-color: yellow; /* Желтый фон для чекбоксов в неопределённом состоянии */
}

В этом примере чекбоксы в неопределённом состоянии будут иметь желтый фон.

Примеры использования псевдокласса :indeterminate

Основные примеры

Стилизация чекбоксов в неопределённом состоянии

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    input[type="checkbox"]:indeterminate {
      background-color: yellow; /* Желтый фон для чекбоксов в неопределённом состоянии */
      border: 2px solid orange; /* Оранжевая граница */
    }
  </style>
  <title>Стилизация чекбоксов в неопределённом состоянии</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="parent-checkbox" /> Родительский чекбокс
    </label>
    <br>
    <label>
      <input type="checkbox" class="child-checkbox" /> Дочерний чекбокс 1
    </label>
    <br>
    <label>
      <input type="checkbox" class="child-checkbox" /> Дочерний чекбокс 2
    </label>
  </form>

  <script>
    const parentCheckbox = document.getElementById('parent-checkbox');
    const childCheckboxes = document.querySelectorAll('.child-checkbox');

    parentCheckbox.addEventListener('change', () => {
      childCheckboxes.forEach(checkbox => {
        checkbox.checked = parentCheckbox.checked;
      });
    });

    childCheckboxes.forEach(checkbox => {
      checkbox.addEventListener('change', () => {
        const allChecked = Array.from(childCheckboxes).every(cb => cb.checked);
        const noneChecked = Array.from(childCheckboxes).every(cb => !cb.checked);

        if (allChecked) {
          parentCheckbox.checked = true;
          parentCheckbox.indeterminate = false;
        } else if (noneChecked) {
          parentCheckbox.checked = false;
          parentCheckbox.indeterminate = false;
        } else {
          parentCheckbox.indeterminate = true;
        }
      });
    });
  </script>
</body>
</html>

В этом примере родительский чекбокс переходит в неопределённое состояние, если некоторые дочерние чекбоксы выбраны, а некоторые — нет.

Стилизация радиокнопок в неопределённом состоянии

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    input[type="radio"]:indeterminate {
      background-color: lightgray; /* Светло-серый фон для радиокнопок в неопределённом состоянии */
      border: 2px solid darkgray; /* Темно-серая граница */
    }
  </style>
  <title>Стилизация радиокнопок в неопределённом состоянии</title>
</head>
<body>
  <form>
    <label>
      <input type="radio" name="option" value="1" /> Вариант 1
    </label>
    <br>
    <label>
      <input type="radio" name="option" value="2" /> Вариант 2
    </label>
  </form>
</body>
</html>

В этом примере радиокнопки могут быть стилизованы в неопределённом состоянии, хотя их реализация обычно не поддерживает это состояние.

Сложные примеры

Стилизация прогресс-бара в неопределённом состоянии

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    progress:indeterminate {
      background-color: lightblue; /* Светло-голубой фон для прогресс-бара в неопределённом состоянии */
    }
  </style>
  <title>Стилизация прогресс-бара в неопределённом состоянии</title>
</head>
<body>
  <progress id="progress-bar" max="100"></progress>

  <script>
    const progressBar = document.getElementById('progress-bar');
    progressBar.indeterminate = true; /* Установка прогресс-бара в неопределённое состояние */
  </script>
</body>
</html>

В этом примере прогресс-бар будет отображаться со светло-голубым фоном в неопределённом состоянии.

Комбинирование с другими селекторами и псевдоклассами

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    input[type="checkbox"]:indeterminate:focus {
      outline: 2px solid blue; /* Синяя граница при фокусе для чекбоксов в неопределённом состоянии */
    }

    progress:indeterminate::-webkit-progress-bar {
      background-color: lightcoral; /* Светло-коралловый фон для прогресс-бара в неопределённом состоянии в WebKit-браузерах */
    }
  </style>
  <title>Комбинирование с другими селекторами и псевдоклассами</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="indeterminate-checkbox" /> Чекбокс в неопределённом состоянии
    </label>
    <br>
    <progress id="progress-bar" max="100"></progress>

    <script>
      const checkbox = document.getElementById('indeterminate-checkbox');
      const progressBar = document.getElementById('progress-bar');

      checkbox.indeterminate = true; /* Установка чекбокса в неопределённое состояние */
      progressBar.indeterminate = true; /* Установка прогресс-бара в неопределённое состояние */
    </script>
  </form>
</body>
</html>

В этом примере чекбокс и прогресс-бар будут стилизованы в неопределённом состоянии, причём чекбокс будет иметь синюю границу при фокусе.

Использование в реальных проектах

Стилизация чекбоксов в списке задач

Пример использования псевдокласса :indeterminate для стилизации чекбоксов в списке задач:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    input[type="checkbox"]:indeterminate {
      background-color: yellow; /* Желтый фон для чекбоксов в неопределённом состоянии */
      border: 2px solid orange; /* Оранжевая граница */
    }
  </style>
  <title>Стилизация чекбоксов в списке задач</title>
</head>
<body>
  <h1>Список задач</h1>
  <form>
    <label>
      <input type="checkbox" id="all-tasks" /> Все задачи
    </label>
    <br>
    <label>
      <input type="checkbox" class="task" /> Задача 1
    </label>
    <br>
    <label>
      <input type="checkbox" class="task" /> Задача 2
    </label>
  </form>

  <script>
    const allTasksCheckbox = document.getElementById('all-tasks');
    const taskCheckboxes = document.querySelectorAll('.task');

    allTasksCheckbox.addEventListener('change', () => {
      taskCheckboxes.forEach(checkbox => {
        checkbox.checked = allTasksCheckbox.checked;
      });

 });

    taskCheckboxes.forEach(checkbox => {
      checkbox.addEventListener('change', () => {
        const allChecked = Array.from(taskCheckboxes).every(cb => cb.checked);
        const noneChecked = Array.from(taskCheckboxes).every(cb => !cb.checked);

        if (allChecked) {
          allTasksCheckbox.checked = true;
          allTasksCheckbox.indeterminate = false;
        } else if (noneChecked) {
          allTasksCheckbox.checked = false;
          allTasksCheckbox.indeterminate = false;
        } else {
          allTasksCheckbox.indeterminate = true;
        }
      });
    });
  </script>
</body>
</html>

В этом примере родительский чекбокс "Все задачи" переходит в неопределённое состояние, если некоторые задачи выбраны, а некоторые — нет.

Стилизация прогресс-бара загрузки

Пример использования псевдокласса :indeterminate для стилизации прогресс-бара загрузки:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    progress:indeterminate {
      background-color: lightblue; /* Светло-голубой фон для прогресс-бара в неопределённом состоянии */
    }
  </style>
  <title>Стилизация прогресс-бара загрузки</title>
</head>
<body>
  <h1>Загрузка...</h1>
  <progress id="loading-progress" max="100"></progress>

  <script>
    const progressBar = document.getElementById('loading-progress');
    progressBar.indeterminate = true; /* Установка прогресс-бара в неопределённое состояние */
  </script>
</body>
</html>

В этом примере прогресс-бар будет отображаться со светло-голубым фоном в неопределённом состоянии, пока продолжается загрузка.

Заключение

Псевдокласс :indeterminate в CSS предоставляет мощный способ для стилизации элементов формы, находящихся в неопределённом состоянии. Это помогает улучшить взаимодействие пользователя с веб-страницей, предоставляя визуальные подсказки о промежуточном статусе элементов. Понимание различных способов использования псевдокласса :indeterminate, а также его комбинирование с другими селекторами и псевдоклассами, помогает разработчикам создавать более гибкие и адаптивные стили. Экспериментируйте с различными подходами и находите оптимальные решения для ваших проектов.

Стрелочка влевоПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиСтрелочка вправо

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Селектор по тегу в CSS. Полное руководство с примерамиУниверсальный селектор в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний