Join Our Telegram Channel For More Support. Join Now!

How to Create Color Picker Using Html, Css and JavaScript ?

In this article, I will tell you an easy way to create a color picker using HTML5. This color picker is commonly used on websites that have a color
How to Create Color Picker Using Html, Css and JavaScript

In this article, I will tell you an easy way to create a color picker using HTML5. This color picker is commonly used on websites that have a color picking function.

Immediately, yes, in HTML5, it turns out that an input type is already provided that handles the need to choose a color. This input type is named color. How to make it very simple, same as creating another type of input the type we use is called color.

<input type="color" value="#1DB8CE" id="colorPicker"/>

When we declare color of input type, then when we click then input color will bring option. Of course, whatever color we choose on the palette, it will be the value of the element itself.

For those of you who have never used this input type, its use is basically the same as a normal input type, with no special treatment. Inputs with this color type also have a value like other input types, so we can take the value from the input color picker.


How to Create Color Picker Using Html, Css and JavaScript :-

Html Code :-

<div class="color-picker">
  <label for="colorPicker">
  <input type="color" value="#1DB8CE" id="colorPicker"/>
  </label>
</div>

Css Code :-

<style type="text/css">
 [type='color'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  width: 11px;
  height: 11px;
  border: none;
}

[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

[type='color']::-webkit-color-swatch {
  border: none;
}
.color-picker {
 padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #f7f7f7;
}</style>

JavaScript Code :-

<script type="text/javascript">
//<![CDATA[
/* Color Picker JavaScript By SmartTechMukesh.Com */
document.querySelectorAll('input[type=color]').forEach(function(picker) {

  var targetLabel = document.querySelector('label[for="' + picker.id + '"]'),
    codeArea = document.createElement('span');

  codeArea.innerHTML = picker.value;
  targetLabel.appendChild(codeArea);

  picker.addEventListener('change', function() {
    codeArea.innerHTML = picker.value;
    targetLabel.appendChild(codeArea);
  });
});
  
//]]>
</script>

Conclusion :-

This is an easy way to build a simple color picker using HTML, CSS and JavaScript that you can use in any of your web design projects. You can use this code in your babe design project anywhere on blogger.com or any other platform like WordPress.

In this post, I shared how to create a color picker using HTML, CSS and JavaScript. I hope this method of creating color picker using HTML, CSS and Javascript can be very useful for you and your blog.

Refrence :
Www.SmartTechMukesh.Com

About the Author

Hello Friends, My Name is John M Smith and Welcome To Our Website. My Passion is to Share Knowledge With Everyone. Also I am a Website Designer.

Buy me a Coffee

Post a Comment

Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.