javascript - 如何更改 HTML5 颜色输入内半径

Question

试图将原生 HTML5 颜色输入变成一个简单的圆圈，似乎可以操纵边框和填充，这是一件好事，我正在寻找一种方法来 border-radius内部颜色...

#color1{
  padding:10px;
  border:none;
  border-radius:10px;
}

#color2{
  background:none;
  border:none;
}

<input type="color" id="color1" />
<input type="color" id="color2" />

Answer 1

没有好的跨浏览器方法可以做到这一点；除了 Chrome(可能还有 Safari 和其他基于 WebKit 的浏览器)，浏览器只是不公开必要的钩子(Hook)。 Firefox 有一些支持，概述 here .

以下将在 Chrome 55 中运行。它是从许多来源编译而来的，最著名的是来自 Keishi Hattori。的 answer

#color1 {
  -webkit-appearance: none;
  padding: 0;
  border: none;
  border-radius: 10px;
  width: 20px;
  height: 20px;
}
#color1::-webkit-color-swatch {
  border: none;
  border-radius: 10px;
  padding: 0;
}
#color1::-webkit-color-swatch-wrapper {
  border: none;
  border-radius: 10px;
  padding: 0;
}

<input type="color" id="color1" />