如何使用Webkit CSS控制input[type=color]输入框周围的颜色框？

Question

是否有一个 Webkit 特有的 CSS 样式，可以控制 input[type=color] 中颜色周围的框的颜色/大小/样式？

我已经设置了输入框的颜色和背景色，以便与我正在使用的旧版 Chrome 和 Firefox 的交叉兼容性填充器配合使用时看起来很好。

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

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

---

在这个图像中，我指的是白色区域周围和绿色区域外面的灰色框：

我找到了一个解决方法，那就是设置足够高的填充，使框（灰色边框和绿色内容）被压缩到大小为 0。但这真的很 hacky，在 Firefox 中也不好看。

- BrianFreud

---

你是在说左边的方框吗？ - DrinkJavaCodeJava

是的。这是实际输入；右边的是颜色选择器。 - BrianFreud

颜色输入：深入探究跨浏览器差异 - vsync

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

方法二

隐藏颜色输入框 (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

---

哇，它们真难找，谢谢:D - BrianFreud

方法2在Chrome、Firefox和Opera上正常运行。 - Aebsubis

请注意，Firefox 中的伪元素等效于 -moz-color-swatch（但是 Firefox 上没有 color-swatch-wrapper 伪元素）。 - Arnaud

2020年，方法一仍然适用于现代Chrome，但有一个疯狂的警告 - 您必须单独声明规则，即不能将“-webkit”和“-moz”前缀组合在一个规则中。 - Coderer

今天用了这个，只想补充一下，将方法1与input[type="color"]:focus { outline: none !important; border: 0px; box-shadow: 0; }结合使用，可以消除焦点边框，使其看起来像没有js的方法2。 - Ancel Designs

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

---

我刚刚为“文件”输入元素做了同样的事情。它非常有效。我将其宽度和高度设置为0，并将溢出设置为隐藏，然后只需按照自己的喜好设置标签样式即可。 - Frank

@Frank，我可能误解了你的意思，但如果你正在使用JS点击文件输入框，那么在IE中这将被视为安全风险而无法正常工作。也许你并没有这样做，但这是提醒其他人的信息。 - Luke Madhanga

卢克，看这个小提琴——它不是基于JS的。根据规范，如果你在标签中放置一个“输入”元素，那么单击该标签会触发“输入”。这与通过单击标签使整个复选框可切换的方式相同。 - Coderer

如果有人在2020年或5年之后使用此代码，它将无法在Safari iOS中工作，因为Safari iOS不支持颜色输入。 - Antony Jones

Answer 3

我正在使用一种简单的解决方案，但不太优美，我想。 您可以将输入内容包装在一个 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>

- Henrique Rotava

---

这非常有帮助，在Edge、Chrome和Firefox中都运行良好 - 谢谢 - JoJo

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

- Terran Webb

---

祝您在IE/Opera/Safari/Edge上好运。 - vsync

快速且无痛苦地完成，而不需要添加另一个HTML元素。我选择了这个。谢谢！ - Partack

Answer 5

建立在 @Henrique Rotava 的方法基础上，我们可以利用隐藏的溢出和负边距来创建一个更灵活的包装器，从而减少 CSS 标记。基本上，当包装器剪辑它时，选择器变得足够大并且伸展出足够多，只有中间部分显示出来。

包装器必须声明一个 width 和 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>

- OXiGEN

---

这是一个纯粹使用CSS的解决方案，做得非常好。 - greyoxide

Answer 6

很遗憾，颜色输入非常棘手。不同的浏览器会有不同的处理方式。例如，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>

- 0b10011

Answer 7

Here is the nice little color input design, you can disable the default frame by -webkit-appearance: none and then give the desired styles. Hop this helps :)

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

- Kiran Maniya

Answer 8

尝试这个...

.input-color-container {
            width: 35px;
            height: 35px;
            border-radius: 8px;
            background-color: white;
            border: 1px solid #D4D9E2;
            // border: solid 2px #ddd;
            // border-radius: 40px;
        }
        .input-color {
            appearance: none;
            background: transparent;
            border: none;
            height: 35px;
            width: 35px;
            cursor: pointer;
            
        }
        .input-color::-webkit-color-swatch {
                border-radius: 50%;
                border: none;
            }

<div class="input-color-container">
  <input class="input-color" value="#FF0000" type="color">
</div>

- Rohit Tagadiya

Answer 9

另一种在这里未提及的方法是使用自定义属性（变量）设置在输入元素本身上，并由元素上直接控制的onInput事件处理程序。由于CSS attr目前没有单位，所以只能创建一个类型为color的变量并使用它。虽然有些麻烦，但HTML仍然只有一个元素。

input[type=color]{
  --size: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  border: 0;
  padding: 0;
  width: 0;
  height: 0;
  background: white;
  margin: calc(var(--size)/-2) 0 0 calc(var(--size)/-2);
}
  
input[type=color]::before{
  content: '';
  display: block;
  background: var(--value);
  text-transform: uppercase;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size)/2) 0 0 calc(var(--size)/2);
  border: 2px black;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  cursor: pointer;
}

<input type="color" value="#ff0000" style="--value:#ff0000" oninput="this.style.setProperty('--value', this.value)" />

---

2020年10月：新的attr（） type语法（尚未确定）

CSS即将推出一个非常棒的新功能，可以在伪元素中访问输入的动态value属性，并将其用于样式。显然，type ="color"允许使用伪元素。

截至目前撰写本文时，没有任何浏览器支持这个功能，该功能允许在attr()中指定type，因此可以将attr用作输入伪元素的background，从而实现完全自定义：

input[type=color]{
  appearance: none;
  margin: 0;
  border: 0;
  padding: 0;
  width: 0;
  height: 0;
  margin: -100px 0 0 -100px;
}
  
input[type=color]::before{
  content: '';
  display: block;
  background: white;
  background: attr(value color, white);
  width: 200px;
  height: 200px;
  margin: 100px 0 0 100px;
  border: 2px black;
  position: relative;
  z-index: 1;
  border-radius: 50%;
}

<input type="color" value="#ff0000" />

- vsync

Answer 10

我认为这个解决方案比目前选择的Keishi Hattori更好。

Keishi Hattori的解决方案在选定的颜色周围留下了一种沉闷的颜色，并且需要设置宽度/高度，如果添加边框，则效果不佳。

我发现以下解决方案效果更好。

input[type="color"] {
  -webkit-appearance: none;
  position:relative;
}
input[type="color"]::-webkit-color-swatch {
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  bottom:-1px;
  box-sizing: border-box;
  border:1px solid transparent;
}

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

如果需要，您可以添加边框。

input[type="color"].withborder {
  -webkit-appearance: none;
  position:relative;
  border:1px solid #000;
}

input[type="color"].withborder::-webkit-color-swatch {
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  box-sizing: border-box;
  border:1px solid transparent;
}

<input type="color" class="withborder"  value="#ff0000">

如果需要，在input[type="color"]中可以添加背景。您需要在::-webkit-color-swatch中更改0px。

input[type="color"].withborder {
  -webkit-appearance: none;
  position:relative;
  border:1px solid #000;
  background:#bbb;

}

input[type="color"].withborder::-webkit-color-swatch {
  position:absolute;
  top:4px;
  left:4px;
  right:4px;
  bottom:4px;
  box-sizing: border-box;
  border:0px solid transparent;
}

<input type="color" class="withborder"  value="#ff0000">

- v1nce