是否有一个Webkit特定的CSS样式，将允许我在输入[type = color]中控制颜色的颜色/大小/样式。我正在设置输入的颜色和背景颜色，因此我使用旧的Chrome和Firefox时的交叉兼容性聚合物，看起来不错。但是现在，Chrome实际上有一个颜色选择器，当颜色和背景颜色被设置为相同的颜色时，颜色周围有一个框，留下一个1px灰色框在输入的中间。有没有一些CSS让我摆脱它，要么将该框的宽度设置为0，将样式更改为none，或者最坏的情况下将颜色设置为与颜色和背景颜色相同。
在这个形象中，我正在谈论白色和绿色之外的灰色框。
http://www.cssjockey.com/wp-content/uploads/2012/04/Screen-Shot-2012-04-08-at-4.52.33-PM-442×350.png
我找到了一个解决方法，它是设置一个足够高的填充，框(灰色边框和绿色内容)被压缩到大小0.但这真的很奇怪，在Firefox中看起来不是很好。
解决方法
WebKit有
special CSS selectors可以用来自定义表单控件，但它们不是官方的。
未来WebKit的更新可能会破坏它。
未来WebKit的更新可能会破坏它。
请不要用于生产！
但是，为了个人项目，请随意玩:)
方法1
使用特定于Webkit的选择器来主要隐藏输入的无色部分。
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 32px;
height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
<input type=color value="#ff0000">
方法2
隐藏颜色输入(不透明度：0)，并使用JavaScript将包装器的背景设置为输入的值。
var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
input[type="color"] {
opacity: 0;
display: block;
width: 32px;
height: 32px;
border: none;
}
#color-picker-wrapper {
float: left;
}
<div id="color-picker-wrapper"> <input type="color" value="#ff0000" id="color-picker"> </div>
