HTML5input颜色的默认颜色

input type="color"具有黑色的默认颜色: #000000

即使我给它一个空值

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

…默认颜色始终为黑色。

我希望用户有select颜色的select,但是如果他不这样做,那就意味着没有select颜色,甚至没有白色#FFFFFF

有没有办法强制input type="color"没有黑色作为默认?

我可以使用某种“侦听器”来检查用户是否第一次更改颜色,如果不是,忽略该值,但是我想避免使用Javascript。

<input type="color">使用hexcode作为value属性时,我注意到的一点是它必须是六位数字,如果使用#fff为白色,则不起作用。 它必须是#ffffff

同样的事情发生在通过JavaScript设置时。 document.querySelector('input[type="color"]').value = '#fff'不起作用。 颜色保持黑色。 你必须使用document.querySelector('input[type="color"]').value = '#ffffff'才能工作。

有些事情要小心。

使用价值:

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

如果你想知道input是否保持不变,你可以做这样的事情(使用jQuery):

 $(function(){ $('input').change(function(){ $(this).addClass('changed'); }) }) 

http://jsfiddle.net/j3hZB/

编辑:现在,因为我已经正确理解你的问题,我已经更新了我的答案。

尽pipeW3C Spec定义了value属性有一个表示颜色的string,但它并没有定义默认的颜色。 所以我认为默认颜色的实现是由浏览器决定的。

但是, WhatWG规范引用了你的问题,

注意:当inputtypes元素处于颜色状态时,总会有一种颜色被选取,并且无法将该值设置为空string。

而且,根据你的期望,CSS语言从来没有为任何元素定义NULL属性,这使得input type='color'不可能具有NULL作为默认值。

解决方法:

解决方法存在于Shadow DOM API中。

在这里输入图像说明

使用Chrome开发者工具,我发现我们可以为伪元素赋予一个transparent颜色::-webkit-color-swatch背景属性 –

 input[type=color]::-webkit-color-swatch { background-color: transparent !important; } 

对于上面的CSS,你的HTML应该是这样的 – <input type="color"> 。 现在你不需要有任何一种监听器来判断用户是否改变了默认的颜色。 您可以简单地将transparent颜色视为NULL颜色,根据该颜色您可以决定值是否已更改!

我相信你会从Firefox的Shadow DOM中find类似的信息来为Firefox设置透明的值。 IE仍然是我们的痛苦。

不知道这个问题是否只在Chrome上可用,但我只是find了铬的快速修复。 我们需要先将input值设置为#FFFFFF,然后将其设置为默认值,默认颜色将会出现,而不是黑色

 var element = document.querySelector('input[type="color"]'); element.value = '#FFFFFF'; //remember the hex value must has 7 characters element.value = element.defaultValue; 

希望它帮助别人:)