Стилизация input color

#css

Появилась потребность в стилизации input[type="color"]. Уже сколько пытаюсь, никак
не могу понять всех стилей этого объекта. Помогите стилизовать и сделать так, как на
картинке:



Моя попытка:



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;
}




    

Ответы

Ответ 1

Стилизовать такое с помощью одного input color вряд ли выйдет. Я бы советовал воспользоваться
дополнительными элементами:



*{
  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;
}

  
  




Ответ 2

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%;
}