如何自訂 Webkit 輸入[type=color] 顏色選擇框？

自訂Webkit 輸入[type=color] 顏色選擇器框

隨著Chrome 中顏色選擇器的引入，使用者遇到了灰色的情況將輸入的顏色和背景顏色設定為相同值時出現框問題。為了解決這個問題，Webkit 提供了特定的 CSS 選擇器來自訂表單控制項。

注意：這些選擇器不是官方的，可能會在未來的 Webkit 更新中中斷。僅在個人項目中謹慎使用它們。

方法1：隱藏非彩色部分

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

這可確保輸入背景顏色已完全覆蓋顏色選擇器框。

範例 HTML：

<input type="color" value="#ff0000">

以上是如何自訂 Webkit 輸入[type=color] 顏色選擇框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！