Question

我想要一个带图标的颜色选择器。看起来像这样： Dot color selector

这是我尝试过的方法，但是输入标签中总是有一个不会消失的方形字体。

input[type='color'] {
    width:100px;
    height:100px;
    border-radius:50px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #0000001A;
    opacity: 1;
}

<input type="color" value="#ff00ff" />

Answer 1

解决方案：

.color-pick {
  width:100px;
    height:100px;
    overflow: hidden;
    border-radius:100%;
}
input[type='color'] {
    width:100%;
    height:100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #0000001A;
    transform: scale(1.5);
}

<div class="color-pick">
<input type="color" value="#ff00ff" />
 </div>

Answer 2

您不能将input标签样式直接更改为圆形。要实现该功能，您需要隐藏color input并显示其他类似<span>的项目。

并且您应该在单击color-select时定义span的操作。此链接会有所帮助。 https://stackoverflow.com/a/48832596/8202850

Answer 3

您为此使用输入的原因是什么？除非您需要显示拾色器或类似的东西，否则实际上没有必要。还有使用type="color"的缺点。 IE 11不支持它，它可能也是Safari的某些版本。

这里可以实现您的屏幕快照显示的内容，并使其易于维护。

html

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

css

    .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...*/

jsFiddle

Answer 4

首先，除非必须这样做（例如，您使用的是JSX或HTML4），否则请勿使用/>来关闭自关闭标签。另外，在CSS属性后面的冒号后面放置一个空格。

这里的技巧是为输入提供一个带有overflow: hidden的容器。示例：

.colorcontainer {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    overflow: hidden;
}
.colorcontainer > input[type='color'] {
    opacity: 1;
    width: 160px;
    height: 160px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #0000001A;
    padding: 0;
    margin: -30px 0 0 -30px;
}

<div class="colorcontainer">
    <input type="color" value="#ff00ff">
</div>

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

4 个答案: