5

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

带彩色边框的文本输入

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

带有填充和彩色边框的纯色条

如果您以前从未见过它，那么它看起来像这样（Windows 7 64bit Google Chrome 版本 22.0.1229.79 m）：

在此处输入图像描述

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

如果我不希望这种行为我不应该使用，这可能是真的，也可能不是真的type="color"，但有时我发现 Chrome 的 UI 有点过于激进。更改所有 inputtype并不是我所期待的，而且我不肯定该应用程序还对它们做什么，所以我最终可能会破坏其他东西。我对日期选择器也有类似的问题。

有什么办法可以改变 Chrome 中的这种行为，这样我就可以拥有一个普通的类似文本的字段？JavaScript/jQuery 是一个选项，但如果它可以通过 CSS-webkit规则以某种方式完成，那就太好了。

4

2 回答 2

4

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

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

于 2012-10-07T01:08:28.503 回答
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

于 2012-10-03T04:31:11.480 回答