5

Google Chrome では、<input type="color">内部に大きな色のバーがある入力を作成し、デフォルトでカラーピッカーを開きます (OS に依存しているように見えますが、私の場合は Windows スキンがあります)。type="color"私は、ほとんどのブラウザーで次のように見えるカスタム カラーピッカーをグローバルに使用しています。

色付きの境界線を持つテキスト入力

しかし、Chrome では次のようになります。

パディングと色付きの境界線のある無地のバー

これまでに見たことがない場合は、必要最小限のものは次のようになります (Windows 7 64 ビット Google Chrome バージョン 22.0.1229.79 m):

ここに画像の説明を入力

カスタム カラーピッカーはデフォルトのものをうまく上書きしますが、問題は Chrome での表示方法です。別の問題は、値をクリアできないように見えることです (js を試しました)。デフォルト値は常に#000000あり、空の値に設定することはできません。

この動作が望ましくない場合は を使用すべきではないというのは本当かもしれませんし、そうでないかもしれませんがtype="color"、Chrome の UI が少し攻撃的すぎると感じることがあります。すべての input types を変更することは、私が楽しみにしていることではありません。また、アプリが他に何を行っているのか確信が持てないため、他の何かを壊してしまう可能性があります。日付ピッカーについても同様の問題がありました。

通常のテキストのようなフィールドを使用できるように、Chrome でこの動作を変更する方法はありますか? -webkitJavaScript/jQuery はオプションですが、何らかの方法で CSS ルールで実行できれば、それは素晴らしいことです。

4

2 に答える 2

4

この場合、type=color を使用しないでください。標準によると、input[type=color] に空の値を指定することはできません。

要素の値が有効な単純な色の場合は、ASCII 小文字に変換された要素の値に設定します。それ以外の場合は、文字列 "#000000" に設定します。

于 2012-10-07T01:08:28.503 に答える
2

表示の問題については、デフォルトのユーザー エージェント スタイルをオーバーライドしてみてください: http://jsfiddle.net/ngBpA/

input[type="color"] {
    -webkit-appearance: textfield;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    display: none;
}

input[type="color"]::-webkit-color-swatch {
    display: none;
}​

プラグインがボックスのサイズを自動的に変更すると仮定しています。

ユーザー エージェント スタイルシート: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

于 2012-10-03T04:31:11.480 に答える