There is a need for styling input[type="color"] . For as long as I try, I can’t understand all the styles of this object. Help stylize and do it like in the picture:

enter image description here

My attempt:

 input[type="color"] { width: 100px; height: 100px; border: none; border-radius: 50%; overflow: hidden; } .color {position: relative;} .color:after { display: block; position: absolute; content: ''; top: 25px; left: 25px; width: 50px; height: 50px; border-radius: 50%; background-color: white; } 
 <div class="color"><input type="color"></div>

2 answers 2

Styling this with one input color unlikely to work. I would advise to use additional elements:

 *{ box-sizing: border-box; } label { display: inline-block; position: relative; width: 150px; height: 150px; cursor: pointer; overflow: hidden; } input[type="color"] { -webkit-appearance: none; border: none; background: #fff; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; outline: none; cursor: inherit; } .circle { position: absolute; left: 30px; top: 30px; width: 90px; height: 90px; background-color: white; border-radius: 50%; cursor: inherit; } /* -webkit */ input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; } /* firefox */ input[type=color]::-moz-focus-inner { border: none; padding: 0; border-radius: 50%; } input[type=color]::-moz-color-swatch { border: none; border-radius: 50%; height: 140px; } 
 <label> <input type="color"> <div class="circle"></div> </label>

    Can i use

     *{ box-sizing: border-box; } input[type="color"] { -webkit-appearance: none; border: none; background: #fff; width: 100px; height: 100px; border: 20px solid #0FFFFF; border-radius: 50%; } /* -webkit */ input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; } /* firefox */ input[type=color]::-moz-focus-inner { border: none; padding: 0; border-radius: 50%; } input[type=color]::-moz-color-swatch { border: none; border-radius: 50%; } 
     <input type=color value="#ffffff">

    • Wow. Thank you very much! In 4 minutes I will accept :) - user238706
    • Stop. And why the middle is painted? You must have sides .. - user238706