是否有特定于 Webkit 的 CSS 样式，可以让我控制颜色周围的框的颜色/大小/样式input[type=color]?
我已经设置了输入的颜色和背景颜色，因此它与我用于旧版 Chrome 和 Firefox 的交叉兼容性填充程序看起来不错。
现在 Chrome 实际上有一个选色器，颜色周围有一个框，留下一个1px当输入的颜色和背景颜色设置为相同颜色时，灰色框浮动在输入的中间。
是否有一些CSS可以摆脱它，或者通过将该框的宽度设置为0，将样式更改为none，或者，最坏的情况是将颜色设置为与颜色和背景颜色相同？
在这张图片中，我谈论的是白色区域周围和绿色区域之外的灰色框：
我找到了一种解决方法，即设置足够高的填充，将框（灰色边框和绿色内容）压缩到大小 0。但这确实很 hacky，并且在 Firefox 中看起来不太好。
WebKit 有特殊的 CSS 选择器您可以使用自定义表单控件，但它们不是官方的。
未来 WebKit 的更新可能会破坏它。
请不要将其用于生产！！
但请随意在个人项目中使用它:)
使用特定于 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">隐藏颜色输入（opacity: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>