<input type="color"> значение атрибута HTML

Элементы <input> типа color предоставляют пользовательский интерфейс, позволяющий указать цвет: с помощью визуального средства выбора цвета или введя его в текстовое поле в формате значения цвета CSS.

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

Попробуйте

<p>Choose your colors:</p>

<div>
  <input type="color" id="foreground" name="foreground" value="#e66465" />
  <label for="foreground">Foreground color</label>
</div>

<div>
  <input
    type="color"
    id="background"
    name="background"
    value="oklab(50% 0.1 0.1 / 0.5)"
    colorspace="display-p3"
    alpha />
  <label for="background">Background color</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Значение

Значение цвета CSS.

Дополнительные атрибуты

Помимо глобальных атрибутов и атрибутов input, общих для всех элементов <input>, элемент input типа color также поддерживает следующие атрибуты:

alpha

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

colorspace

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

• "limited-srgb": цвет принадлежит цветовому пространству sRGB. Сюда входят значения rgb(), hsl(), hwb() и <hex-color>. Значение цвета ограничено 8 битами на компонент r, g и b. Это значение используется по умолчанию.
• "display-p3": цветовое пространство Display P3, например color(display-p3 1.84 -0.19 0.72 / 0.6)

Использование полей ввода цвета

Поля ввода типа color просты в использовании благодаря ограниченному числу поддерживаемых атрибутов.

Задание цвета по умолчанию

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

<input type="color" value="#ff0000" />
<input
  type="color"
  id="body"
  name="body"
  value="oklab(50% 0.1 0.1 / 0.5)"
  colorspace="display-p3"
  alpha />

Если значение не указано, недопустимо или не поддерживается браузером, по умолчанию используется #000000 — непрозрачный чёрный цвет.

Отслеживание изменений цвета

Как и для других типов <input>, для обнаружения изменений значения цвета можно использовать два события: input и change. Событие input срабатывает на элементе <input> каждый раз при изменении цвета. Событие change срабатывает, когда пользователь закрывает средство выбора цвета. В обоих случаях новое значение элемента можно получить, обратившись к его value.

Ниже приведён пример отслеживания изменений значения цвета с течением времени:

colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", watchColorPicker);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Выбор значения

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

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

colorPicker.select();

Проверка допустимости

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

Пример

Создадим пример, в котором поле ввода цвета будет выполнять дополнительные действия: отслеживать события change и input, получать новый цвет и применять его ко всем элементам <p> в документе.

HTML

HTML-код довольно прост: пара абзацев с описанием и элемент <input> типа color с идентификатором color-picker, который мы будем использовать для изменения цвета текста абзацев.

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="color-picker">Color:</label>
<input type="color" value="#ff0000" id="color-picker" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

JavaScript

Инициализация

Следующий код инициализирует поле ввода цвета:

const defaultColor = "#0000ff";
const colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", updateAll);
colorPicker.select();

Код получает ссылку на элемент цвета <input> в переменную с именем colorPicker, а затем задаёт значением поля ввода цвета значение из defaultColor. После этого событие input поля ввода цвета настраивается на вызов нашей функции updateFirst(), а событие change — на вызов updateAll(). Обе функции показаны ниже.

Наконец, мы вызываем select(), чтобы выделить текстовое содержимое поля ввода цвета, если элемент реализован как текстовое поле (это не даст эффекта, если вместо него предоставлен интерфейс средства выбора цвета).

Реакция на изменение цвета

Для обработки изменений цвета мы определяем две функции. Функция updateFirst() вызывается в ответ на событие input. Она изменяет цвет первого элемента абзаца в документе, чтобы он соответствовал новому значению поля ввода цвета. Поскольку события input срабатывают каждый раз при изменении значения (например, при увеличении яркости цвета), они будут повторяться во время использования средства выбора цвета.

function updateFirst(event) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

При закрытии средства выбора цвета, означающем, что значение больше не будет меняться (если только пользователь снова не откроет средство выбора цвета), элементу отправляется событие change. Мы обрабатываем это событие с помощью функции updateAll(), используя Event.target.value для получения окончательно выбранного цвета:

function updateAll(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Этот код задаёт цвет каждого блока <p> так, чтобы его атрибут color соответствовал текущему значению поля ввода цвета, на которое ссылается event.target.

Результат

Итоговый результат выглядит так:

Техническая сводка

Спецификации

Совместимость с браузерами

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

См. также

• HTMLInputElement.alpha
• HTMLInputElement.colorspace