Javascript 将输入类型颜色转换为圆形

我想要一个带有点图标的颜色选择器。看起来是这样的：

这是我尝试过的，但是在输入标记中总是有一个sqaure，它不会消失

输入[type='color']{ 宽度：100px； 高度：100px； 边界半径：50px； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 3px 6px 0000001A； 不透明度：1； } 不能直接将输入标记样式更改为圆形。 要实现这一点，您需要隐藏颜色输入并显示其他类似的项目

当点击span时，您应该定义颜色选择的动作。 这个链接会有帮助。 解决方案：

.颜色选择{ 宽度：100px； 高度：100px； 溢出：隐藏； 边界半径：100%； } 输入[type='color']{ 宽度：100%； 身高：100%； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 3px 6px 0000001A； 转换：scale1.5； }

---

首先，不要用/>关闭自动关闭标签，除非你必须这样做，例如，你正在使用JSX或HTML4。另外，在CSS属性后面的冒号后面加一个空格

这里的技巧是给输入一个带有overflow:hidden的容器。例如：

.彩色容器{ 宽度：100px； 高度：100px； 边界半径：50px； 溢出：隐藏； } .colorcontainer>输入[type='color']{ 不透明度：1； 宽度：160px； 高度：160px； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 3px 6px 0000001A； 填充：0； 利润率：-30px0-30px； }

---

您使用输入进行此操作的原因是什么？除非你需要展示一个颜色选择器或类似的东西，否则它实际上是没有必要的。使用type=color还有一个缺点。IE 11中不支持它，也可能是Safari的某些版本

这里有一些东西可以实现你的屏幕截图显示的内容，并能够轻松地维护它

html

    <div class="color-wrapper">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>

    .color-wrapper span {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: inline-block;
    }

    .color-wrapper span:nth-child(1)  {
        background-color: #f00;
    }
    /*and so on...*/