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

我的想法：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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'>

＆＃13;

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

请参阅下面的代码段。

$("#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;
}

<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'>

<强>更新

我想我得到了解决方案的教程.. Here是它..

圆角<input type =“color”/>

2 个答案: