如何使用Webkit CSS控制Input[Type=Color]中的顏色方塊？

使用Webkit CSS控制Input[Type=Color]中的顏色框

在Web開發領域，可自訂的表單控制項是必必不可少的實現一個有凝聚力和用戶友好的介面。然而，某些輸入元素的預設外觀，例如 input[type=color]，有時可能會出現問題。

例如，當 input[type=color] 的顏色和背景色設定為相同的值，顏色周圍會出現灰色框，有損於所需的美感。為了解決這個問題，Webkit 提供了一組非官方 CSS 選擇器，可讓您調整表單控制項的外觀。

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

此方法有效去除灰色區域，呈現乾淨且一致的顏色選擇器。

注意：

重要的是請注意，Webkit 的非官方選擇器很容易在未來的更新中發生變化。因此，強烈建議不要將它們用於生產環境。它們最適合實驗項目或個人使用。

以上是如何使用Webkit CSS控制Input[Type=Color]中的顏色方塊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！