Появилась потребность в стилизации 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;
}
Ответ
Стилизовать такое с помощью одного 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;
}
Комментариев нет:
Отправить комментарий