如何在Webkit中自定义颜色选择器输入框？

控制 Webkit 中的颜色选择器框

旧版浏览器的交叉兼容性填充可能会在设置 input[type=color] 元素样式时引入不一致在 Webkit 中。具体来说，当将输入的颜色和背景颜色设置为匹配时，所选颜色周围会出现一个灰色框。

WebKit 特定 CSS 选择器

自定义表单像颜色选择器这样的控件，Webkit 提供了特定的 CSS 选择器。但是，需要注意的是，这些选择器不是官方的，并且可能会在未来的 Webkit 更新中发生重大更改。

因此，建议避免在生产中使用它们，除非用于个人项目。

方法一：隐藏非彩色部分

使用Webkit特有的选择器，可以在很大程度上隐藏颜色选择器输入的非彩色部分。

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 32px;
    height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}

<input type="color" value="#ff0000">

以上是如何在Webkit中自定义颜色选择器输入框？的详细内容。更多信息请关注PHP中文网其他相关文章！