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

Here is the code you need:

var colorButton = document.getElementById("primary_color");
    var colorDiv = document.getElementById("color_val");
    colorButton.onchange = function() {
        colorDiv.innerHTML = colorButton.value;
        colorDiv.style.color = colorButton.value;
    }

#primary_color{
    border-radius: 100%;
    height: 60px;
    width: 60px;
    border: none;
    outline: none;
    -webkit-appearance: none;
}

#primary_color::-webkit-color-swatch-wrapper {
    padding: 0;	
}
#primary_color::-webkit-color-swatch {
    border: none;
    border-radius: 100%;
}

Easy enough to understand, Good luck! :)