0
220
ViewsHow do I add text on my color picker in html
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 class="more_colors" id="colorpicker" type="color" value="#e6f28a">
·
Juan Pablo Isaza
2 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
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 class="more_colors" >
<label for="colorpicker">Color Picker</label>
<input id="colorpicker" type="color" value="#e6f28a" >
</div>
·
Juan Pablo Isaza
Report
Answer question