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＆＃39; answer

＆＃13;

eps

＆＃13;

#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;
}

＆＃13;

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>

more on the docs用于将父级的背景更改为所选颜色 - 对于“input”事件处理程序，信用转到jQuery。

话虽如此，如果您还需要第二种颜色，只需将另一个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.有关兼容性的详情，请参阅this answer。

Answer 3

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

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

将width和height的200％添加到input
使用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>

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

3 个答案: