Input type color styling

Question

I have a small question, since I\'m not too good at CSS i want to know if there any way I can recreate such a nice input[type=color] element\'s style? I mean not everything on t

Answer 1

I'm not sure if that's possible with just html and CSS to achieve that. But using Javascript you can cook up something like the following:

• Wrapping the input color tag in a label with border radius 50%.
• Hiding the input and setting a background to the label.
• Using javascript to change the color of the label depending on the color changed in the input color container.

Javascript:

var color_picker = document.getElementById("primary_color");
var color_picker_wrapper = document.getElementById("test_wrapper");
color_picker.onchange = function() {
  color_picker_wrapper.style.background = color_picker.value;
}

#primary_color {
  visibility: hidden;
}

#test_wrapper {
  background: linear-gradient(to bottom right, red, orange, yellow, green, blue, violet);
  height: 32px;
  width: 32px;
  position: fixed;
  border-radius: 50%;
  box-shadow: 1px 4px 10px black;
}

Jquery:

$(document).on('change', '#primary_color', function() {
  $("#test_wrapper").css('background', "" + document.getElementById('primary_color').value);
});

#primary_color {
  visibility: hidden;
}

#test_wrapper {
  background: linear-gradient(to bottom right, red, orange, yellow, green, blue, violet);
  height: 32px;
  width: 32px;
  position: fixed;
  border-radius: 50%;
  box-shadow: 1px 4px 10px black;
}