Color Picker

How to center label text

by heyjs

HTML

<div class="color-picker">
  <input type="color" id="colorpick" name="colorpick" value="#55aaff">
  <label for="colorpick" class="colorpick-label">Select a color:</label>
</div>

CSS

#colorpick {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.colorpick-label {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: turquoise;
  border: 1px solid grey;
  text-align: center;
  vertical-align: middle;
}

.colorpick-label:hover,
#colorpick:focus + .colorpick-label {
  border-color: black;
}

#colorpick:active + .colorpick-label {
  filter: brightness(90%);
}