1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <input>
  6. <input type="color">

<input type="color">

类型为 color 的 <input> 元素提供了一个用户界面元素，让用户可以通过视觉颜色选择器界面或通过将颜色输入到 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 颜色值。

注意： 历史上，只允许使用基本的十六进制颜色（不带 alpha 通道）。现在，可以使用任何 CSS 颜色格式，包括命名颜色、函数表示法和带 alpha 通道的十六进制颜色。如果省略 value 或其无效，则默认值为 #000000（黑色）。

附加属性

除了全局属性和所有<input>元素共有的输入属性之外，color输入还支持以下属性：

alpha

如果存在，这是一个布尔属性，表示颜色'的 alpha 分量可以由最终用户操作，并且不必完全不透明。

colorspace

定义颜色的色彩空间，并暗示颜色选择器小部件所需的用户代理界面。可能的枚举值为

  • "limited-srgb"：颜色在 sRGB 色彩空间中。这包括 rgb()、hsl()、hwb() 和 <hex-color> 值。颜色值限制为每个 r、g 和 b 分量 8 位。这是默认值。
  • "display-p3"：Display P3 色彩空间，例如，color(display-p3 1.84 -0.19 0.72 / 0.6)

使用颜色输入

类型为 color 的输入很简单，因为它们支持的属性数量有限。

提供默认颜色

您可以更新上面的示例来设置一个默认值，这样颜色选择器将预填充默认颜色，并且颜色选择器（如果有的话）也将默认选择该颜色。

html
<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 来确定元素的新值。

这是一个随着时间追踪颜色值变化的示例

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

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

选择值

当浏览器不支持颜色选择器界面时，其颜色输入实现将是一个文本框，它会自动验证内容以确保值采用正确的格式。在这种情况下，您可以使用 select() 方法来选择当前编辑字段中的文本。

如果浏览器改为使用颜色选择器，则 select() 不执行任何操作。您应该了解此行为，以便您的代码在任何情况下都能做出适当的响应。

js
colorPicker.select();

验证

如果用户代理无法将用户的输入转换为七个字符的小写十六进制表示法，则颜色输入的值被认为是无效的。在这种情况下，:invalid 伪类将应用于该元素。

示例

让我们创建一个示例，通过跟踪 change 和 input 事件，获取新颜色并将其应用于文档中的每个 <p> 元素，从而对颜色输入做更多事情。

HTML

HTML 相当简单——几段描述性材料，带有一个 ID 为 color-picker 的 color 类型 <input>，我们将用它来更改段落文本的颜色。

html
<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

初始化

以下代码初始化颜色输入

js
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 事件，因此在使用颜色选择器时，这些事件会重复发生。

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

当颜色选择器被关闭时，表示该值将不会再次更改（除非用户重新打开颜色选择器），一个 change 事件被发送到元素。我们使用 updateAll() 函数处理该事件，使用 Event.target.value 获取最终选择的颜色

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

这会设置每个 <p> 块的颜色，使其 color 属性与颜色输入的当前值匹配，该值使用 event.target 引用。

结果

最终结果如下

技术摘要

值 任何 CSS <color> 值，无论采用何种表示法。
事件 change 和 input
支持的常见属性 autocomplete 和 list
IDL 属性 alpha、colorSpace、list 和 value
DOM 接口 HTMLInputElement
方法 select()
隐式 ARIA 角色 没有对应的角色

规范

规范
HTML
# 颜色状态（type=color）
HTML
# 属性输入阿尔法
HTML
# 属性输入颜色空间

浏览器兼容性

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

另见

帮助改进 MDN

了解如何贡献

本页面最后修改于 ，由 MDN 贡献者修订。

在 GitHub 上查看此页面 • 报告此内容的问题