Webkit CSS来控制一个颜色的输入框[color = color]？

是否有一个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的更新可能会破坏它。

请不要用于生产！

但是，为了个人项目，请随意玩:)

方法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>