如何更改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有一些支持，概述了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" />

Answer 2

这可以通过以下片段整齐地实现，该片段将输入的不透明度设置为0（不可见）并将父div的背景设置为所选颜色。

$(document).ready(function() {
  $('#color1').on('input', function() {
    $(this).parent().css({
      background: $(this).val()
    });
  });
});

#color1 {
  border: none;
  opacity: 0;
}

.rounded {
  display: inline-block;
  border-radius: 10px;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rounded">
  <input type="color" id="color1" />
</div>

jQuery用于将父级的背景更改为所选颜色 - 对于“输入”事件处理程序，将信用转到this answer。

话虽如此，如果您还需要第二种颜色，只需将另一个div作为.rounded的父级，并将颜色设置为您的首选项。

$(document).ready(function() {
  $('#color1').on('input', function() {
    $(this).parent().css({
      background: $(this).val()
    });
  });
});

#color1 {
  border: none;
  opacity: 0;
}
.rounded,
.wrapper {
  display: inline-block;
  border-radius: 10px;
}
.rounded {
  background: black;
}
.wrapper {
  padding: 10px;
  background: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="rounded">
    <input type="color" id="color1" />
  </div>
</div>

此代码段适用于所有现代浏览器版本，包括IE 10.有关兼容性的更多信息，请参阅the CanIUse page。

Answer 3

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

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

3. 将width和height添加到input 200％
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>