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

Webkit でのカラー ピッカーのカスタマイズ

カラー タイプの入力要素のコンテキストにおいて、Webkit ブラウザは、選択した色とボックスが表示されます。このボックスは、入力の色と背景色が一致する場合、1 ピクセルの灰色の境界線として表示されます。

このボックスの外観を制御するには、CSS を使用する限られたオプションがあります。

WebKit-特定のセレクター

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

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