Convert input type color into circle

solution:

.color-pick {
  width:100px;
    height:100px;
    overflow: hidden;
    border-radius:100%;
}
input[type='color'] {
    width:100%;
    height:100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #0000001A;
    transform: scale(1.5);
}

<div class="color-pick">
<input type="color" value="#ff00ff" />
 </div>

You can not change the input tag style into circle directly. To implement that, you need to hide the color input and show other item like <span> instead.

And you should define action of color-select when click span. This link will help. https://stackoverflow.com/a/48832596/8202850

What's the reason you are using an input for this? It's actually not necessary unless you need to show a color picker or similar. Also there's a downside of using type="color". It's not supported in IE 11 and may be some versions of Safari too.

Here's something to achieve what your screenshot shows and to be able to maintain it easily.

html

    <div class="color-wrapper">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>

css

    .color-wrapper span {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: inline-block;
    }

    .color-wrapper span:nth-child(1)  {
        background-color: #f00;
    }
    /*and so on...*/

jsFiddle

First of all, don't close self-closing tags with a /> unless you have to (e.g. you're using JSX or HTML4). Also, put a space after the colon after CSS properties.

The trick here is to give the input a container with overflow: hidden. Example:

.colorcontainer {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    overflow: hidden;
}
.colorcontainer > input[type='color'] {
    opacity: 1;
    width: 160px;
    height: 160px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #0000001A;
    padding: 0;
    margin: -30px 0 0 -30px;
}

<div class="colorcontainer">
    <input type="color" value="#ff00ff">
</div>