<input type="color">

<input>元素type属性值设置为"color"时将定义一个颜色选择控件。该控件是HTML5新增的一个控件，其提供一个界面允许用户指定一种颜色或者在界面文本框中通过键入十六进制颜色值来设定一种颜色。

使用该控件设置的颜色仅支持简单的十六进制颜色，不包含α通道（透明度）。

颜色控件定义的基本格式

在HTML中，颜色控件的定义格式可能的形式如下：

其中，type属性用于指定输入控件的类型为颜色："color"；

id属性是可选属性，是控件的唯一标识，以方便客户端脚本获取到该控件，或使用CSS类指定控件的样式；

name属性是控件的名称，在传递到服务器端时，方便服务器端脚本通过名称获取控件的值；

value属性指定控件的默认值，此处设置控件默认的颜色值是：#5c9de5。    

value属性

<input type="color">控件的value属性是一个包含7个字符的字符串。该字符串用于给出形如 #rrggbb 十六进制的RGB颜色。

该控件的value属性用于在定义控件时给出颜色拾取器的默认值或返回用户选择的颜色值。

在HTML中，可以使用大写或小写的字母来表示十六进制的颜色。但在控件中，即使用户输入的是大写的十六进制，其最终也会转换为小写的字母形式。

对于用户设置的无效的十六进制颜色，该控件都会被设置为#000000（     完全黑色）。

如果用户未提供value属性的值，其值默认为#000000。

颜色拾取器的一个例子

该例子借助<input>元素的onchange事件来改变文本的颜色。

当用户选择颜色时将触发onchange事件，并改变id值为p1的文本颜色。

其在Edge浏览器中页面加载完毕后效果如下：

当用户点击该控件时，将弹出如下颜色选择/设置界面：

在该界面中包含默认颜色在颜色拾取框中的位置，当前颜色的RGB值等元素。

用户可以通过输入RGB值或通过点击颜色条中的颜色来改变颜色的类别，并在颜色框中选择一种颜色。

下图是演示中用户选择的颜色：

上图中，本站先在颜色挑中点击红色颜色，然后在颜色框中选择一种颜色，并在颜色文本框中显示了选择颜色的RGB值。用户在颜色拾取器外点击一下，关闭颜色拾取框，则选择的颜色将生效，并传递给<input type="color">的value属性。

本例的最终效果如下图所示：

浏览器对该颜色控件的支持

当前使用的主流浏览器都支持该控件。但Ineternet Explorer 11及早期版本与Safari 9.1及早期版本不支持该控件。

本文详细讲解了HTML中颜色拾取框的相关知识，读者可以点击这里查看本文的示例在浏览器中的显示效果。

以上讲解了HTML中<input type="color">的使用方法及主要属性，如有问题请留言明示。

如对以上内容有疑问或文中有错误之处，请留言指出。如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的链接地址：http://www.biye5u.com/article/html5/2023/6614.html。