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

Webkit でのカラー ピッカー ボックスの制御

古いブラウザの相互互換性ポリフィルでは、input[type=color] 要素のスタイル設定時に不一致が発生する可能性がありますウェブキットで。具体的には、入力の色と背景色を一致させるように設定すると、選択した色の周囲に灰色のボックスが表示されます。

WebKit 固有の CSS セレクター

フォームをカスタマイズするにはカラー ピッカーなどのコントロールに加えて、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;
}

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

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