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

Question

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

在这张图片中,我说的是白色内部和绿色外部的灰色框:

我找到了一个解决方法,即设置一个足够高的填充,框(灰色边框和绿色内容)被压缩到0大小.但这真的很糟糕,并且在Firefox中看起来不太好.

Answer 1

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

方法2

隐藏颜色input(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>

Answer 2

基于 @Henrique Rotava 的方法，我们可以利用隐藏的溢出和负边距来创建一个具有更少 CSS 标记的更灵活的包装器。基本上，拾取器变得足够大并且足够伸展，当包装器夹住它时，只有中间部分出现。

包装器必须声明 awidth和height，这对于您想要设置包装器而不是 . 样式的大多数用例来说应该没问题input。否则该元素将不可见。对于包装器来说，所有其他格式都是可选的。

input[type='color'] {
  padding: 0;
  width: 150%;
  height: 150%;
  margin: -25%;
}

.cp_wrapper {
  overflow: hidden;
  width: 2em;
  height: 2em;
  /* optional formatting below here */
  border-radius: 50%;
  box-shadow: 1px 1px 3px 0px grey;
  margin: 1em;
}

<div class="cp_wrapper">
  <input type="color" name="cp_1" value="#ff8888" />
</div>
<div class="cp_wrapper">
  <input type="color" name="cp_2" value="#88ff88" />
</div>
<div class="cp_wrapper">
  <input type="color" name="cp_3" value="#8888ff" />
</div>

Answer 3

一个好的解决方法是:

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

现在,您有一个易于样式的标签,点击后,打开您的颜色选择器:

的jsfiddle

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

Answer 4

这就是我最近为一个艺术项目所做的。我是新手，所以如果我做错了，请告诉我。

input[type=color]{
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 40px;
	background: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: solid 1px #000; /*change color of the swatch border here*/
	border-radius: 40px;
}

<input type="color" value="#C899F5">

Answer 5

不幸的是，颜色输入非常挑剔。不同的浏览器对它们的处理方式不同。例如，Chrome 将根据width/ height+调整输入的大小border-width。另一方面，Firefox 将使用width/height和border-width. 这<input type=color>本身就使得相等的间距变得非常困难。

但是，我们可以做的是删除除所选颜色本身之外的所有内容，并在其周围放置一个包装器，以便能够更可预测地处理输入周围的间距。

label.color-picker {
  width: 150px; /* Width of color picker */
  border: 1px solid #ccc; /* Outer border */
  border-radius: 3px; /* Border radius of outer border */
  padding: 5px; /* Space between outer border and color picker */
  background: #fff; /* Color between outer border and color picker */

  display: block; /* Contain color picker within label */
}

label.color-picker > span {
  border: 1px solid #ccc; /* Border around color in color picker */

  display: block; /* Contain color picker within span */
}

label.color-picker > span > input[type=color] {
  height: 10px; /* Height of color picker */

  display: block; /* Avoids space above/below color picker */
  width: 100%; /* Fill available horizontal space */
  border: none; /* Remove browser's border */
  padding: 0px; /* Remove space around color picker in Chrome */
}

/* Chrome styles */
label.color-picker > span > input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0; /* Remove browser's padding around color picker */
}
label.color-picker > span > input[type=color]::-webkit-color-swatch {
  border: none; /* Remove browser's border around color in color picker */
}

/* Firefox styles */
label.color-picker > span > input[type=color]::-moz-color-swatch {
  border: none; /* Remove browser's border around color in color picker */
}
label.color-picker > span > input[type=color]::-moz-focus-inner {
  border: none; /* Remove browser's padding around color in color picker */
  padding: 0; /* Remove browser's padding around color in color picker */
}

<label class="color-picker">
    <span>
        <input type=color value="#ff00ff">
    </span>
</label>

Answer 6

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

这是漂亮的小颜色输入设计，您可以禁用默认框架-webkit-appearance: none，然后给出所需的样式。希望这有帮助:)

input[type="color"] {
   -webkit-appearance: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
    box-shadow: 2px 2px 5px rgba(0,0,0,.1);
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}

<input type=color value="#A4A4A4">