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

huangapple
go评论116阅读模式
英文:

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.

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

Can I do it with only HTML, CSS or I need JavaScript? Thanks.

答案1

得分: 0

  1. 如果你希望直到用户点击按钮才显示颜色选择器，我认为[这个答案][1]是你在寻找的。
  3.     div {
  4.       height: 100px;
  5.       position: relative;
  6.       background: lightgray;
  7.       width: 200px;
  8.       text-align: center;
  9.       line-height: 100px;
  10.     }
  11.     div input {
  12.       position: absolute;
  13.       top: 0;
  14.       left: 0;
  15.       height: 100%;
  16.       width: 100%;
  17.       opacity: 0;
  18.       cursor: pointer;
  19.     }
  21.     <div>点击我
  22.       <input type="color" />
  23.     </div>
  25.   [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.

  1. div {
  2.   height: 100px;
  3.   position: relative;
  4.   background: lightgray;
  5.   width: 200px;
  6.   text-align: center;
  7.   line-height: 100px;
  8. }
  9. div input {
  10.   position: absolute;
  11.   top: 0;
  12.   left: 0;
  13.   height: 100%;
  14.   width: 100%;
  15.   opacity: 0;
  16.   cursor: pointer;
  17. }
  19. <div>CLICK ME
  20.   <input type="color" />
  21. </div>

答案2

得分: 0

你可以将一个标签与颜色输入元素关联起来，然后隐藏该输入元素。这样，当您点击标签时，它将打开颜色选择器。

  1. <div class="color-picker">
  2.   <label for="colorPicker"><i class='bx bx-palette'></i></label>
  3.   <input type="color" value="#1dbbce" id="colorPicker">
  4. </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 -->

  1. .color-picker{
  2.   font-size:24px;
  3. }
  4. #colorPicker {
  5.   display: none;
  6. }

<!-- language: lang-html -->

  1. &lt;link href=&#39;https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css&#39; rel=&#39;stylesheet&#39;&gt;
  3. &lt;div class=&quot;color-picker&quot;&gt;
  4.   &lt;label for=&quot;colorPicker&quot;&gt;&lt;i class=&#39;bx bx-palette&#39;&gt;&lt;/i&gt;
  5.     &lt;/label&gt;
  6.   &lt;input type=&quot;color&quot; value=&quot;#1dbbce&quot; id=&quot;colorPicker&quot;&gt;
  7. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月19日 04:00:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76502340.html
  • colors
  • css
  • html
  • input
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定