我可以改变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的浏览器).Firefox有一些支持,在此概述.

以下内容适用于Chrome 55.它来自多个来源,最着名的是来自Keishi Hattori的回答

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

Answer 2

1. 将其包裹input在div.
2. 将border-radius和overflow属性添加到div.

对于 Firefox 来说这似乎已经足够了。对于 Chrome 来说：

3. 添加width200 height%input
4. 重新定位input使用transform

div {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  overflow: hidden;
}

[type="color"] {
  border: 0;
  padding: 0;
  width: 200%;
  height: 200%;
  cursor: pointer;
  transform: translate(-25%, -25%)
}

<div>
  <input type="color">
</div>