如何自定义Webkit浏览器中的颜色输入框？

在 Webkit 中设置颜色输入框的样式

“color”类型的输入元素在现代浏览器中提供了颜色选择器。但是，所选颜色周围的框的外观可能会因浏览器的不同而有所不同。在 Chrome 和 Safari 等基于 Webkit 的浏览器中，颜色预览周围可能会出现一个灰色框。

自定义框

要调整此框的外观，Webkit提供允许自定义的特定 CSS 选择器。不过，需要注意的是，这些选择器不是官方的，可能会在未来的 Webkit 更新中发生更改。

方法 1：隐藏非彩色区域

这个方法使用 -webkit-appearance: none 选择器删除输入的默认外观，然后应用自定义样式来隐藏框的非彩色部分：

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;
}

此方法有效地隐藏了灰色框，仅留下有色部分可见。但是，请务必记住，依赖特定于 Webkit 的选择器可能会在其他浏览器中产生兼容性问题。

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