How do I add text on my color picker in html-CodePudding

I have this color picker and I wanted to add some plus sign or something like more colors text on my color picker how do I do that? For now there is this hyphen on the color picker:

.more_colors {
  position: relative;
  top: 4px;
  left: 2cm;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 20px;
  background-color: rgb(152, 219, 43);
}

<input  id="colorpicker" type="color" value="#e6f28a">

CodePudding user response：

You can use a <label> to display text beside the input, since the input value is always a color (in hexadecimal format). Also remove the padding and background-color properties to visualize the color input changes:

#colorpicker {
  cursor: pointer;
}

<div>
  <input type="color" id="colorpicker" value="#e6f28a">
  <label for="colorpicker">More Colors</label>
</div>

CodePudding user response：

I think this should work for you.

.more_colors {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  border-radius: 20px;
  background-color: rgb(152, 219, 43);
  margin: 10px;
}

.more_colors label {
  padding: 15px 25px;
}

.more_colors input {
  visibility: hidden;
  position: absolute;
  bottom: 0;
}

<div  >
  <label for="colorpicker">Color Picker</label>
  <input id="colorpicker" type="color" value="#e6f28a" >
</div>