Webkit ブラウザのカラー入力ボックスをカスタマイズするにはどうすればよいですか?

Webkit でのカラー入力ボックスのスタイル設定

「color」タイプの入力要素は、最新のブラウザーにカラー ピッカーを提供します。ただし、選択した色の周囲のボックスの外観はブラウザによって異なる場合があります。 Chrome や Safari などの Webkit ベースのブラウザでは、カラー プレビューの周囲に灰色のボックスが表示されることがあります。

ボックスのカスタマイズ

このボックスの外観を調整するには、Webkitカスタマイズを可能にする特定の CSS セレクターを提供します。ただし、これらのセレクターは公式のものではなく、今後の Webkit の更新で変更される可能性があることに注意することが重要です。

方法 1: 色のない領域を非表示にする

これこのメソッドは、-webkit-Appearance: none セレクターを使用して入力のデフォルトの外観を削除し、カスタム スタイルを適用してボックスの色のない部分を非表示にします。

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 ブラウザのカラー入力ボックスをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。