英文:
Input color open at custom button
问题
你可以使用HTML和CSS来打开颜色选择器，但如果要在按钮按下时获取颜色值并进行特定操作，你需要使用JavaScript。谢谢。
英文:
How can i open an input type color when i press a custom button to get the color value? I want the color-palette button to open the input color and nothing else to show like the green color box.
<div class="color-picker">
<button id="color-palette"><i class='bx bx-palette'></i>
<input type="color" value="#1dbbce" id="colorPicker">
</button>
</div>
Can I do it with only HTML, CSS or I need JavaScript? Thanks.
答案1
得分: 0
如果你希望直到用户点击按钮才显示颜色选择器，我认为[这个答案][1]是你在寻找的。
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>点击我
<input type="color" />
</div>
[1]: https://stackoverflow.com/questions/30300146/showing-color-picker-dialog-without-showing-input-option
英文:
If you're wanting to not show the color picker at all until the user clicks on a button, I think this answer is what you're looking for.
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>
答案2
得分: 0
你可以将一个标签与颜色输入元素关联起来，然后隐藏该输入元素。这样，当您点击标签时，它将打开颜色选择器。
<div class="color-picker">
<label for="colorPicker"><i class='bx bx-palette'></i></label>
<input type="color" value="#1dbbce" id="colorPicker">
</div>
英文:
You can associate a label with the color input element and then hide the input. This way when you click the label it will open the color picker.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.color-picker{
font-size:24px;
}
#colorPicker {
display: none;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论