Input type color styling

Issue

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 the screenshot but only that pretty circle which is input[type=color].

Here I have some code that was written with it but it's not styling the input[type=color] like on a screenshot... Also I have seen that the author uses Vue.js in his project... Thank you very much for help!

<input type="color" id="primary_color" class="field-radio" name="primary-color" v-model="scheme.primary" @change="changeColor()"> 

input[type="color"] {
    width: 3rem;
    height: 3rem;
    padding: .5rem;
    background-color: transparent;
    border: 0;
    border-radius: 100%;
}
input[type="color" i] {
    -webkit-appearance: square-button;
    width: 44px;
    height: 23px;
    background-color: buttonface;
    cursor: default;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(169, 169, 169);
    border-image: initial;
    padding: 1px 2px;
}
input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}
input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}
input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}

Solution

Here is the code you need:

let colorButton = document.getElementById("primary_color");
let colorDiv = document.getElementById("color_val");

colorButton.oninput = function() {
    colorDiv.innerHTML = colorButton.value;
    colorDiv.style.color = colorButton.value;
}

#primary_color{
    border-radius: 50%;
    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: 50%;
}

<div class="container">
    <input type="color" id="primary_color" class="field-radio">
    <span class="container" id="color_val"></span>
</div>

Basically, it will find the colorButton in the DOM and listen to the input event on this element. When it fires, the text and the color of the text will be updated.

Answered By - SeReGa