html颜色输入,html – 输入类型颜色样式

我有一个小问题,因为我不太擅长CSS我想知道是否有任何方法我可以重新创建这样一个很好的输入[type = color]元素的风格？我的意思不是屏幕截图上的所有内容,而只是输入[type = color]的那个漂亮的圆圈.

这里我有一些用它编写的代码,但它没有像截图那样设置输入[type = color] …我也看到作者在他的项目中使用了Vue.js …非常感谢你救命！

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,button,meter,progress {

-webkit-writing-mode: horizontal-tb;

}