Webkit CSSを使用してInput[Type=Color]のカラーボックスを制御するにはどうすればよいですか?

Webkit CSS を使用した入力[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 中国語 Web サイトの他の関連記事を参照してください。