File inputのスタイルと文字の変更方法Firefox、IEなどのブラウザに適用されます.

エディタの読み込み中…書き上げるたびに忘れてしまいました.次回使う時は資料を調べて書き直します.これは今日書いたテストコードです.保存して、自分に記録します.同時にみんなに共有します.目標:下のこのアップロードファイルのinputスタイルと文字を一言で「アップロード画像」に変えて、同様に画像をアップロードする機能を実現します.难点1、ブラウザによって、スタイル表现が异なります.2、文字はclickだけではいけません.3、input上の文字は変更できません.解決の方法はJavascriptでいろいろな方法を試しましたが、全部だめです.面倒くさいです.最後にネットで一人で書いた方法を見て、ヒントを与えました.そこでCSSは二行だけで解決します.直接文字にオンリークリーンイベントを追加してinputのclickを実現すれば、ファイルを選択することができますが、このような方法はフォームsubmitの時には無効になります.だから、file inputは本当のクリックで効果があります.そこで、方法を考えて、inputを文字の上に置いて、透明にして、このように文字を注文する時、実際にinputをクリックして、ファイルのアップロードを実現しました.第一歩はinputをCSSで大きく変えて、文字の後ろに置いて、このように文字を注文する時、実はInputを注文しました.

  をアップロード 

 第二のステップ
CSSをもうちょっと変えて、余ったInputの部分を隠してもいいです.

  をアップロード 

 最終的な効果はInputを100%透明にすればいいです.

  をアップロード 

このように、原理を知ったら、文字と様式を自由に変えられます.写真に変えて、ボタンに変えても大丈夫です.2、この方法はちょっと田舎っぽいですが、簡単で実用的で、私のパソコンのブラウザ(ie 6/ie 7/firefox)を全部適用します.File inputのスタイルと文字の変更方法Firefox、IEなどのブラウザに適用される原文のアドレスは以下の通りです.http://www.zishu.cn/09/859.html