<input type="color">

<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 (en-US)change (en-US)

  • 每次颜色变更都会触发元素上的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! (en-US)

特性 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本支持 1.0 12 1.0 (1.7 or earlier) 2 1.0 1.0
type="color" 20.0 38 29.0 (29.0) [1] 未实现 11.01 10
特性 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本支持 (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)
type=color 4.4 27.0 (27.0) ? (Yes) ?

[1]  在Windows Touch上尚未实现。