试图将原生的html5颜色输入到一个简单的圆形圆圈中,似乎可以操作边框和填充这是一件好事,我正在寻找一种border-radius
内在颜色的方法......
#color1{
padding:10px;
border:none;
border-radius:10px;
}
#color2{
background:none;
border:none;
}
没有好的跨浏览器方式这样做; 浏览器只是不公开必要的钩子,除了Chrome(以及Safari和其他基于WebKit的浏览器).Firefox有一些支持,在此概述.
以下内容适用于Chrome 55.它来自多个来源,最着名的是来自Keishi Hattori的回答
#color1 {
-webkit-appearance: none;
padding: 0;
border: none;
border-radius: 10px;
width: 20px;
height: 20px;
}
#color1::-webkit-color-swatch {
border: none;
border-radius: 10px;
padding: 0;
}
#color1::-webkit-color-swatch-wrapper {
border: none;
border-radius: 10px;
padding: 0;
}