Question 189696 in Html Question posted in
Some basic documentation can be found here.

Html – Input color open at custom button

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>

Image

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    .color-picker{
  font-size:24px;
}
#colorPicker {
  display: none;
}
    <link href='https://unpkg.com/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search