圆角 <input type='color'>

Question

$("#colour").change(function(event) {
    console.log($(this).val());
});

input[type=color] {
    width: 100px;
    height: 100px; 
    border-radius: 50%;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='color' value='#fefefe' class='bar' id='colour'>

即使我做了<input type='color'>四舍五入，当我输入一个值（至少在 safari 中）时，它会将圆改为正方形。我怎样才能做到这一点？谢谢。

Answer 1

我的点子：

1. 创建一个内联块 <span>
2. 设置input[type=color]为不可见。
3. 绑定点击事件<span>触发<input>.click()。

因为<input>对形状定制不友好。

$("#colour").change(function(event) {
    console.log($(this).val());
    $("#color_front").css('background-color',$(this).val());
});

$("#color_front").click(function(event) {
    $("#colour").click();
});

input[type=color] {
    display: none;
}
span {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  background-color:red;
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="color_front"></span>
<input type='color' value='#fefefe' class='bar' id='colour'>

Answer 2

在之前类似的情况下，我为此所做的是添加两个带有伪选择器的额外样式::-webkit-color-swatch，并且::-webkit-color-swatch-wrapper..不知道确切的原因..当时不知何故得到了这个答案（可能来自SO本身;)）..

添加，

input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
}

请参阅下面的片段..

input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
}

$("#colour").change(function(event) {
    console.log($(this).val());
});

input[type=color] {
    width: 100px;
    height: 100px; 
    border-radius: 50%;
    overflow: hidden;
}

input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
}

更新

我想我得到了解决方案的教程..这就是..