CODEWITHSUNDEEP
htmlcolors
C. Jacquelin
C. Jacquelin

Reputation: 21

Color selector with 12 predefined colors

How to insert in a HTML/Bootstrap form a color picker or color selector with 12 predefined colors , Thank you

Upvotes: 2

Views: 778

Answers (1)

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

You can create simple color picker with predefined colors in few steps:

  1. Create list with colors: datalist id="colors";
  2. Attach list to input type="color" by setting list="colors";
  3. (Optional) Customize colorpicker, see style section of Code Snippet.

Note that datalist for input[type=color] only accepts the hex color values (ex. "#ff0000") and values such as "#f00" or "red" won’t work.

See Code Snippet:

.colorpicker-wrapper {
  display: flex;
  align-items: center;
  column-gap: .5rem;
}

.colorpicker {
  padding: 0;
  border: none;
  width: 1.5rem;
  height: 1.5rem;
}

.colorpicker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.colorpicker::-webkit-color-swatch {
  border: none;
}
<!-- Define list of color options -->
<datalist id="colors">
  <option value="#e66465">
  <option value="#ffffff">
  <option value="#000000">
  <option value="#c5c500">
  <option value="#c54100">
  <option value="#c50000">
  <option value="#729901">
  <option value="#01995b">
  <option value="#015999">
  <option value="#012f99">
  <option value="#3d0566">
  <option value="#7b0199">
</datalist>

<!-- attach options to color picker 'list="colors"' -->
<div class="colorpicker-wrapper">
  <input type="color" id="head" class="colorpicker" name="head" value="#e66465" list="colors">
  <label for="head">Check color</label>
</div>

For more details you can take a look at this article

It will show you how to use colorpicker without libraries.

Upvotes: 4

Related Questions