当前位置：文江博客知识库简体中文文档 Web HTML Element input color

<input type="color"> - HTML（超文本标记语言）编辑

<input type="color">元素是<input>元素中的一个特定种类，用来创建一个允许用户使用颜色选择器，或输入兼容CSS语法的颜色代码的区域。（不支持Alpha通道）

此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。其UI除要能接收文本格式的颜色外，未要求其他特性。（更多信息）

内容分类	流动区域, 列表, 可提交, 可重置, 表单相关元素, 短语内容, 可标记元素, 可触摸元素。
允许的内容	无，这是一个 empty element。
标签省略	必须有开始标签，必须没有结束标签。
允许的父级元素	任何接受短语内容的元素。
DOM接口	`HTMLInputElement`

属性

该元素具有下面属性及其他的全局属性。

autocompleteHTML5: 设置颜色区域的autocomplete值。如果为true，则将自动填充颜色选择器上次存储的值。
autofocusHTML5: 此布尔值属性使你可以指定当页面加载时，表单区域是否应当获得输入焦点。除非用户的操作覆盖这个属性，例如：在其他区域内进行输入。在整个文档中，只有一个元素可以拥有autofocus属性，值为布尔值。
disabled: 此布尔值标明颜色选择其是否不可用于交互。另外，disabled时的值不会随表单提交。
name: 随表单一起提交的颜色选择器的name。
value: 颜色选择器的value，指定颜色选择器默认选择的颜色。input的value值必须是长度为7的字符串，以#开始，包含16进制格式的颜色值。例如：#FF0000为红色的16进制值。

使用

"color"类型的输入内容比较简单。

<input type="color" />

默认值

你可以给上面的例子添加一个默认值，对元素本身和选色器都生效。

<input type="color" value="#ff0000" />

上述代码会创建一个默认选择红色的颜色选择器。

下面的图片展示了macOS平台Chrome浏览器的颜色选择器：

This is how an input type color looks on Mac and within Chrome

如果你没有手动指定的话，元素的默认值为"#000000"，即黑色。输入必须为7个字符，以"#"符号开始，后跟代表红、绿、蓝的十六进制字符各2个，形如"#rrggbb"。如果你想输入的颜色是其他格式（比如CSS中的rgb()或rgba()记法），在设定value值时必须将其转换为这种格式。

监听颜色变化

正如其他类型的<input>元素，有两个和值的改变相关的事件，input和change：

每次颜色变更都会触发元素上的input事件。
用户关闭选色器之后会触发change事件。

对于这两个事件，都可以通过value属性获取新值。

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

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

选取值

如果浏览器的实现不支持为"color"类型的<input>元素提供选色器而只有一个文本框，可以使用select()方法选取输入内容。如果浏览器提供了选色器，select()方法将会什么也不做。因此，需要留心这两种情况下方法行为的差异。

colorWell.select();

实现差异

如上文所说，如果浏览器不提供选色器，此元素将会显示为一个具备输入验证功能的文本框。例如，在Safari 10.1中，你将会看到以下内容：

Screenshot of the example taken in Safari.

而相同的内容在Firefox 55下则会显示成：

Screenshot of the example taken in Firefox 55 for macOS

如果点击元素，则会弹出选色器，在此例中，为macOS平台的选色器。

Screenshot of the element with the color picker open in Firefox Mac.

验证

如果当前的user agent下，用户输入无法转换为7个字符的十六进制RGB形式，会被判定为非法输入。在这种情况下，:invalid伪类会生效。

规范

规范	状态	注释
HTML Living Standard	Living Standard
HTML5	Recommendation
HTML 4.01 Specification	Recommendation	初始定义

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!