Webkit CSS 来控制输入 \[type=color\] 中颜色周围的框？

Question

是否有特定于 Webkit 的 CSS 样式允许我控制 input[type=color] 中颜色周围框的颜色/大小/样式？

我已经设置了输入的颜色和背景颜色，所以它看起来很适合我用于旧版 Chrome 和 Firefox 的交叉兼容性 polyfill。

现在 Chrome 实际上有一个 _颜色选择器_，当输入的颜色和背景颜色都设置为相同的颜色时，颜色周围有一个框，在输入的中间留下一个 1px 灰色框。

是否有一些 CSS 可以摆脱它，通过将该框的宽度设置为 0，将样式更改为 none ，或者最坏的情况是，将颜色设置为与颜色和背景颜色相同？

---

在这张图片中，我说的是白色区域周围和绿色区域之外的灰色框：

我找到了一种解决方法，即设置足够高的填充，使框（灰色边框和绿色内容）被压缩到 0 大小。但这真的很 hacky，并且在 Firefox 中看起来不太好。

原文由 BrianFreud 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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>

原文由 Keishi Hattori 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

一个好的解决方法是：

1. 将颜色选择器包裹在标签中。
2. 将颜色选择器的可见性设置为 false。
3. 将标签的背景颜色绑定到颜色选择器的值。

现在，您有一个易于设置样式的标签，单击该标签会打开您的颜色选择器。正如评论中所讨论的那样，单击标签会在 没有 任何 javascript 的情况下激活颜色选择器；这是默认行为。

 $(document).on('change', 'input[type=color]', function() {
  this.parentNode.style.backgroundColor = this.value;
});

 input {
  visibility: hidden;
}

label {
  background-color: black;
  height: 32px;
  width: 32px;
  position: fixed;
}

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<label><input type="color"></label>

JSFiddle： https ://jsfiddle.net/9zhap7rb/3/

原文由 CodeToad 发布，翻译遵循 CC BY-SA 4.0 许可协议