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