我有一个小问题,因为我不太擅长 CSS,所以我想知道是否有任何方法可以重新创建如此漂亮的 input[type=color] 元素的样式?我的意思不是屏幕截图上的所有内容,而是输入 [type=color] 那个漂亮的圆圈。
这里我有一些用它编写的代码,但它没有像屏幕截图上那样设置输入 [type=color] 的样式…我还看到作者在他的项目中使用了 Vue.js …非常感谢帮助!
<input type="color" id="primary_color" class="field-radio" name="primary-color" v-model="scheme.primary" @change="changeColor()">
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, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
原文由 user8690818 发布,翻译遵循 CC BY-SA 4.0 许可协议
这是您需要的代码:
基本上,它会在 DOM 中找到
colorButton
并侦听此元素上的input
事件。当它触发时,文本和文本的颜色将被更新。