Question

在谷歌浏览器中，<input type="color">会在其中创建一个带有大条颜色的输入，默认情况下会打开一个颜色选择器（看起来它依赖于操作系统，我有一个Windows皮肤）。我正在全局使用自定义颜色选择器，它挂钩到type="color"，在大多数浏览器中都是这样的：

text input with colored borders

但在Chrome中，它看起来像这样：

solid colored bar with padding and a colored border

如果您以前从未见过它，那么这款机器就像这样（Windows 7 64位Google Chrome版本22.0.1229.79 m）：

enter image description here

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

如果我不想要这种行为，我可能也可能不会使用type="color"，但有时候我发现Chrome的UI过于激进了。更改所有输入type并不是我所期待的，而且我不肯定应用程序正在做什么，所以我最终可能会破坏其他内容。我和日期选择器有类似的问题。

有没有办法在Chrome中更改此行为，以便我可以拥有正常的文本字段？ JavaScript / jQuery是一个选项，但如果可以用CSS -webkit规则完成，那将会很棒。

Answer 1

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

If the value of the element is a valid simple color, then set it to the value of the element converted to ASCII lowercase; otherwise, set it to the string "#000000".

Answer 2

对于显示问题，请尝试覆盖默认的用户代理样式：http://jsfiddle.net/ngBpA/

input[type="color"] {
    -webkit-appearance: textfield;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    display: none;
}

input[type="color"]::-webkit-color-swatch {
    display: none;
}

我假设您的插件会自动调整大小。

用户代理样式表：http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

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

2 个答案: