如何在 WebKit 瀏覽器中自訂顏色選擇器框？

Webkit 中的顏色選擇器自訂

在顏色類型的輸入元素的上下文中，Webkit 瀏覽器提供了圍繞顏色選擇器功能以可見框選擇顏色。當輸入的顏色和背景顏色相符時，此方塊可以顯示為 1px 灰色邊框。

要控制此框的外觀，使用 CSS 的選項有限。

WebKit-特定選擇器

WebKit 提供了一些專門為自訂表單控制項而設計的非官方 CSS 選擇器。然而，這些選擇器在未來的 WebKit 更新中可能會受到破壞。因此，它們的使用應僅限於個人項目，而不是生產環境。

方法1：隱藏Box

此方法使用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;
}

以上是如何在 WebKit 瀏覽器中自訂顏色選擇器框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！