控制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中文網其他相關文章！
