在Google Chrome中禁用<input type ="color">的颜色选择器

Question

在谷歌浏览器中,<input type="color">创建一个内部带有大条颜色的输入,默认情况下,打开一个颜色选择器(看起来它依赖于操作系统,我有一个Windows皮肤).我在全球范围内使用一个自定义颜色选择器,type="color"它在大多数浏览器中都是这样的:

但在Chrome中它看起来像这样:

如果你以前从未见过它,那么一个看起来很像的东西(Windows 7 64位谷歌Chrome版本22.0.1229.79米):

自定义颜色选择器会覆盖默认颜色选择器,但问题在于它在Chrome中的显示方式.另一个问题是我似乎无法清除值(已经尝试过js),默认值始终是#000000不能设置为空值.

如果我不想要这种行为我不应该使用type="color",也可能不是这样,但有时我发现Chrome的UI有点过于激进.改变所有的输入type并不是我所期待的,而且我不肯定应用程序正在做什么,所以我最终可能会破坏别的东西.我和日期选择器有类似的问题.

有没有办法在Chrome中更改此行为,以便我可以拥有一个普通的文本字段？JavaScript/jQuery是一个选项,但如果可以用CSS -webkit规则以某种方式完成那将是很好的.

Answer 1

在这种情况下，您不应使用 type=color。根据标准，input[type=color] 不能为空值。

如果元素的值是有效的简单颜色，则将其设置为转换为 ASCII 小写的元素的值；否则，将其设置为字符串“#000000”。