是否有一个Webkit特定的CSS样式，可以让我控制input[type=color]框中颜色的颜色/大小/风格input[type=color] ？ 我已经设置了输入的颜色和背景颜色，所以它看起来不错，用于旧版Chrome和Firefox的交叉兼容性填充。 但现在Chrome实际上有一个颜色选择器，当颜色和输入的背景颜色都设置为相同颜色时，颜色周围会出现一个框，在输入中间留下1px灰色框浮动。 是否有一些CSS可以摆脱它，或者通过将该框的宽度设置为0，将样式更改为none ，或者在最坏的情况下将颜色设置为与颜色和背景颜色相同？

在这张图片中，我正在谈论白色和绿色之外的灰色方块：

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

---

WebKit有特殊的CSS选择器，可以用来自定义表单控件，但它们不是官方的。
未来更新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">

---

一个好的解决方法是：

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

现在，您可以轻松创建样式标签，点击后可打开您的颜色选择器：

的jsfiddle

<label id="test_wrapper"><input id="inp" type="color"></label>

---

我想用一个简单的解决方案，但不是那么优雅。 你可以用一个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>

链接地址: http://www.djcxy.com/p/75527.html

上一篇: Webkit CSS to control the box around the color in an input[type=color]?

下一篇: CSS and input 100% width