MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

<input type="color">元素<input>元素中的一个特定种类,用来创建一个允许用户选择颜色或编辑颜色代码的区域。对于颜色选择器的UI,除要能接收文本格式的颜色外,其他特性都是未要求的(更多信息) 。

浏览器会生成一个用来选择或改变颜色的输入区域。用户输入的数据会被表现成颜色。

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

属性

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

autocompleteHTML5
设置颜色区域的autocomplete值。如果为true,则将自动填充颜色选择器上次存储的值。
autofocusHTML5
此布尔值属性使你可以指定当页面加载时,表单区域是否应当获得输入焦点。除非用户的操作覆盖这个属性,例如:在其他区域内进行输入。在整个文档中,只有一个元素可以拥有autofocus属性,值为布尔值。
defaultvalue
设置颜色选择器的默认值。
disabled

此布尔值标明颜色选择其是否不可用于交互。另外,disabled时的值不会随表单提交。

name
随表单一起提交的颜色选择器的name。
value
颜色选择器的value,指定颜色选择器默认选择的颜色。input的value值必须是长度为7的字符串,以#开始,包含16进制格式的颜色值。例如:#FF0000为红色的16进制值。

示例

创建一个颜色选择器:

<input type="color"  />

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

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

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

下面是图片展示了Mac Chrome浏览器的颜色选择器:

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

规范

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

浏览器兼容性

特性 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上尚未实现。

文档标签和贡献者

 此页面的贡献者: konrumi
 最后编辑者: konrumi,