javascript 输入颜色在自定义按钮处打开

9q78igpj 于 2023-06-20 发布在 Java

关注(0)|答案(2)|浏览(101)

当我按下自定义按钮以获取颜色值时，如何打开输入类型颜色？我希望调色板按钮打开输入颜色，而不显示其他颜色，如绿色颜色框。

<div class="color-picker">
    <button id="color-palette"><i class='bx bx-palette'></i>
           <input type="color" value="#1dbbce" id="colorPicker">
    </button>
</div>

Image
我可以只使用HTML、CSS或JavaScript吗？谢谢

JavaScript

来源：https://stackoverflow.com/questions/76502340/input-color-open-at-custom-button

2条答案

按热度按时间

pinkon5k1#

如果你想在用户点击按钮之前不显示颜色选择器，我认为this answer是你要找的。

div {
  height: 100px;
  position: relative;
  background: lightgray;
  width: 200px;
  text-align: center;
  line-height: 100px;
}
div input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

<div>CLICK ME
  <input type="color" />
</div>

赞(0）回复(0）举报 2023-06-20

ttcibm8c2#

您可以将标签与颜色输入元素相关联，然后隐藏输入。这样，当您单击标签时，它将打开颜色选择器。

.color-picker{
  font-size:24px;
}
#colorPicker {
  display: none;
}

<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

<div class="color-picker">
  <label for="colorPicker"><i class='bx bx-palette'></i>
    </label>
  <input type="color" value="#1dbbce" id="colorPicker">
</div>

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 输入颜色在自定义按钮处打开

2条答案

相关问题

热门标签

最新问答