html - css で入力 [type=file] をスタイルして、クロスブラウザと互換性を持たせるにはどうすればよいですか?

Question

input[type=file]マイページに入れました。Firefox と Chrome ではレンダリングが異なりますが、

• Chrome では参照ボタンはフィールドの内側にあり、Firefox ではフィールドの外側にあります。
• フィールドのスタイルをグラデーションの背景に設定し、グレーの境界線を付けました。ただし、Firefox では機能しませんが、Chrome では問題ないように見えます。

特定のブラウザーで両方を適切にレンダリングする CSS を使用してスタイルを設定する方法はありますか?

Answer 1

ネイティブ フォーム要素のスタイルを設定するのは非常に難しいですが、これが役立つかもしれません: http://uniformjs.com/

Answer 2

• スタイル入力型ファイル?
• 入力のスタイル=ボタンとしてのファイル
• Firefox でファイル入力フィールドのスタイルを設定するにはどうすればよいですか?
• input type="file" ボタンのスタイリング
• ファイル入力用のカスタム テキスト
• CSS3 / Javascriptで「入力ファイル」をスタイルするには?
• スタイリング <input type="file">
• 入力 TYPE="File" 入力を非表示にしてボタンを残しますか?
• input type="file" でカーソルの種類を変更する
• https://stackoverflow.com/questions/3984815/jquery-best-way-to-style-a-input-file-tag
• 入力ファイルフィールドから入力テキストフィールドへ
• 入力ファイルのテキストボックスのスタイルを設定するにはどうすればよいですか?

Answer 3

入力ボックスの内側と外側の両方に同じ色のテキストを表示しなければならないことが問題であることを FF 開発者に理解させるのに本当に苦労しました。入力ボックスの他のすべてのテキストは入力ボックスの背景に対して表示されますが、FF22 または 23 ファイル入力のテキストは - 一時的にだけ希望しましょう - 外にあるものに対して「表示」されます。黒地に黒文字？

解決策は、CSS で、すべての入力要素に背景色を配置するか、ファイル タイプの要素だけに背景色を配置することです。

input[type="file"] {background-color: #FFF;} or 
input {background-color: #FFF;}

すべてのブラウザーのすべての入力にそれを配置しても害はないようです。ほぼ普遍的なデフォルトは入力用の白い BG であるためです。クラスを使用してターゲットを設定する必要はありません (必要な場合を除きます)。古い FF および他のすべてのブラウザーは、参照ボタンを備えた使い慣れた入力ボックスを使用するためです。これにより、ユーザーはファイル リンクをコピーして貼り付けることができるため、便利な利点があります。