Webkit の入力[type=color] カラー ピッカー ボックスをカスタマイズするにはどうすればよいですか?

Webkit 入力のカスタマイズ[type=color] カラー ピッカー ボックス

Chrome にカラー ピッカーが導入されたことで、ユーザーはグレーの画面に遭遇しました。入力の色と背景色の両方を同じ値に設定すると、ボックスの問題が発生します。これに対処するために、Webkit はフォーム コントロールをカスタマイズするための特定の CSS セレクターを提供します。

注: これらのセレクターは公式ではないため、将来の Webkit アップデートで機能しなくなる可能性があります。個人的なプロジェクトの場合のみ慎重に使用してください。

方法 1: 色の付いていない部分を非表示にする

この方法では、Web キット固有のセレクターを利用して、色の付いていない部分を非表示にします。 input:

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

これにより、入力背景色がカラー ピッカーを完全にカバーするようになります。 box.

HTML の例:

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

以上がWebkit の入力[type=color] カラー ピッカー ボックスをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。