Webkit CSS控制输入框周围的颜色[type=Color]？

Question

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

我已经设置了输入的颜色和背景色，所以它看起来很好，与我在旧的Chrome和Firefox上使用的交叉兼容性polyfill兼容。

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

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

在这张图中，我说的是白色区域周围和绿色外部的灰色盒子：

我找到了一个解决办法，那就是设置足够高的填充，使框（灰色边框和绿色内容）压扁为0。但这真的很有意思，而且在Firefox中看起来不太好。

Answer 1

我用的是一个简单的解决方案，但不那么优雅，我猜。您可以用div包装输入，并使输入比容器大，然后您可以根据需要对容器进行形状调整。您还可以使用带有for属性的标签来创建带有某些文本的可单击按钮。

我举了一个例子：

.input-color-container {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  border: solid 2px #ddd;
  border-radius: 40px;
}

.input-color {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 56px;
  height: 56px;
  border: none;
}

.input-color-label {
  cursor: pointer;
  text-decoration: underline;
  color: #3498db;
}

<div class="input-color-container">
  <input id="input-color" value="#ed6868" class="input-color" type="color">
</div>
<label class="input-color-label" for="input-color">
  I am a clickable label, try me
</label>

Answer 2

一个好的解决方法是：

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

现在，您有一个易于样式化的标签，当单击时，打开您的颜色选择器。正如评论中所讨论的，单击一个标签会激活颜色选择器，而不需要任何javascript；这是默认行为。

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

css lang-css prettyprint-override">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>

Answer 3

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">