圆角 <input type='color'>答案

【问题标题】：Rounded <input type='color'>圆角 <input type='color'>
【发布时间】：2018-07-27 16:43:31
【问题描述】：

$("#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 中）时，它会将圆形改为正方形。我怎样才能做到这一点？谢谢。

【问题讨论】：

溢出：隐藏？和边框：无，大纲：无..
@TemaniAfif 不，它们或它们的组合都不起作用。
Webkit 有一些可能有用的非官方 CSS 选择器。在这里查看答案：Webkit CSS to control the box around the color in an input[type=color]。它works for me in Chrome，但当然不是很好的跨浏览器兼容。
相关参考：Styling native elements.

标签： javascript html css input colors

【解决方案1】：

使用下面的代码，肯定可以的。

 input {
            width: 50px;
            height: 50px;
            border-color: black;
            color: black;
            background-color: #fff;
            border: none;
            cursor: pointer;

        }

        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 10px;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="color" name="color-gradient-1" id="color1" value="#ff0000" />

</body>

</html>

使用下面的代码，肯定可以的

input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 10px;
}

【讨论】：

这似乎或多或少（大部分）与this answer from three years ago相同
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案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;
}

见下面的 sn-p..

$("#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 是吗..

【讨论】：

【解决方案3】：

我的想法：

创建一个内联块<span>
将input[type=color] 设置为不可见。
绑定<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'>

【讨论】：

非常好，并且合理地跨浏览器兼容。