HTML でファイルをアップロードするときに使用する <input type="file"> 要素のスタイルをカスタマイズします。

Web ページでは、基本的に <input type="file"> 要素はファイルをアップロードするときに使用されます。デフォルトのスタイルは次のとおりです。

Chromeの場合:

IEの場合:

上記のいずれの場合も、スタイルは比較的シンプルで、多くの Web ページのスタイルとは調和しません。

ユーザーのニーズやデザインスタイルに応じて表示スタイルを変更する機会は数多くあります。

次のようなブートストラップスタイルのアップロードボタンを作成したい場合、どのように実装できますか?

アップロードボタンを構築するために必要な基本要素

効果（クローム）：

現在表示されているのは 2 行で表示されます。

周辺を div に置き換えない理由は、IE7 ブラウザでは、インラインに設定されていない限り、その幅が最大可能な幅まで拡張されるためです。 inline に設定すると要素の幅を調整できないため、span を使用して inline-block に設定するとこの問題を解決できます。

スタイルを追加して 2 行を 1 行にします

css:

効果：

デフォルトでは水色の枠線はありません。マウスをクリックした後にのみ表示されます。ここでは見やすくするために表示されています。

外側のスパンを display:relative に設定し、入力を display:absolute に設定すると、それらはすべてドキュメント フローの外側になります。

入力を外側の範囲に限定し、絶対位置決めを行うことで、本来の2行表示が1行表示に変更されます。

実際、ここでオーバーフローしています。実際の幅は「アップロード」テキストの幅です。fileinput-button スタイルを変更して、overflow: hidden を追加します。

効果：

非常に興味深いです。上部と右側に青い境界線が表示されていますが、これは実際には左側と下部のオーバーフロー部分を隠しています。

このとき、マウスで「アップロード」という単語をクリックすると、実際には入力をクリックすることになり、「開く」ダイアログ ボックスが表示される場合があります。これは、表示階層では入力が「アップロード」よりもユーザーに近いためです。

入力位置の右側に注意してください。なぜ左側の配置を使用しないのですか。

左に変更する場合。

効果（クローム）：

効果（IE）：

Chromeでは入力要素の選択ボタンが露出していますが、後から透明度を設定することで透明にできるので問題ありません。

ただし、入力ボックスは IE で公開されます。重要なのは、マウスが入力ボックスに移動すると、ポインターが入力状態に変わることですが、これは非常に扱いにくいです。

右配置方法を使用して入力ボックスを左に移動すると、IE でマウス ポインターが入力状態に変わるのを回避できます。

透明な入力要素

CS: ...

効果：

入力は完全に消えてしまいましたが、「アップロード」をクリックすると引き続き機能します。

IE8+ をサポートできます。

Bootstrapをインポートし、ボタンスタイルを追加する

ヘッド内に外部 CSS および JS への参照を追加します。

ボタンスタイルを追加します。

効果：

サイズの問題を解決する

fileinput-button スタイルに width:100px を追加し、外側のスパンを 100px 幅に設定すると、下部をクリックしても反応がないことがわかります。これは、入力がデフォルトのサイズであり、下部をカバーできないためです。

入力部分のフォントサイズを大きく設定して拡大することで、重なりの問題を解決できます。ここでは 200 px に設定しています。

これにより、カバレッジの問題が解決されます。

仕上げる。

参考: jQuery-File-Upload

IE7 に対応させたい場合は、jQuery-File-Upload の記述方法を参考にしてください。

コード：