如何自訂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中文網其他相關文章！