Javascript 如何创建循环输入类型=颜色元素？

我只是想设计一个

元素的样式，使其成为一个圆形，而不改变其单击行为

我的第一种方法是使用CSS来设置样式，但这需要使用

：：-webkit色样

/

：-moz色样

，它们是且浏览器支持较差的

const randomColor=（）=>
'#' + ((1  {
event.currentTarget.value=randomColor（）；
event.currentTarget.style.backgroundColor=event.currentTarget.value；
});
color.addEventListener（'input'，event=>{
event.currentTarget.style.backgroundColor=event.currentTarget.value；
})；

#颜色{
边界半径：25px；
高度：50px；
填充：0；
宽度：50px；
}
#颜色：：-webkit色样{
显示：无；
}
#颜色：：-moz色样{
显示：无；
}

---

您可以使用

不透明度：0

，也可以使用

指针事件：无

，而不是使用

显示：无

隐藏本机输入，以便模式在您想要的位置打开，在这种情况下，

8px

位于圆圈下方：

const randomColor=（）=>'#'+（（1{
input.value=div.style.backgroundColor=randomColor（）；
输入。单击（）；
});
addEventListener（'input'，（）=>{
div.style.backgroundColor=input.value；
})；

#div{
位置：相对位置；
边框：1px实心；
边界半径：25px；
高度：50px；
填充：0；
宽度：50px；
溢出：隐藏；
}
#颜色{
位置：绝对位置；
排名：0；
左：0；
高度：计算（100%+8px）；
宽度：100%；
保证金：0；
填充：0；
边界：0；
不透明度：0；
指针事件：无；
}

通过对可见元素使用

，我们不需要任何JavaScript。本地输入行为或多或少得到了保留。这也有助于可访问性，因为它将用户交互指向辅助技术可以识别的实际输入元素

#颜色{
不透明度：0；
位置：绝对位置；
指针事件：无；
高度：50px；
}
.colorBtn{
显示：内联块；
高度：50px；
宽度：50px；
边界半径：25px；
背景：绿松石；
边框：1px纯灰；
}
/*您需要添加一些交互样式*/
.colorBtn:悬停，
#颜色：焦点+.colorBtn{
边框颜色：黑色；
}
#颜色：活动+.colorBtn{
滤光片：亮度（90%）；
}