Firefoxのファイル入力フィールド内のボタンが機能しません

Question

スタイルファイルinputを私のページに入れたいので、それを完全にカバーしてopactiyを0に設定してbuttonの中に入れてください。

このアプローチは、クロームが、Firefoxの（とIE）の最新バージョンではかなりうまく機能ボタンをクリックするとファイルダイアログを開くことができません。

http://jsfiddle.net/ch8xxvez/3/

<button style="width: 100px; height: 100px; position: relative;">Upload button 
    <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input> 
</button> 

同じコード作品であれば私はbutton要素をdivに置き換えましたが、IEの最新版（> = 10）、FF、Chrome & Edgeでbuttonタグを使用する方法があるかどうか本当に知りたいです。

Answer 1

入力要素は、HTMLのボタン要素内では使用できません。

一貫したエラーリカバリの代わりに、有効なHTMLを記述してください。

ボタンを作成し、兄弟要素を入力し、コンテナ（divなど）内に配置します。

Answer 2

の中に<input>を含めることはできません。代わりに<label>の内部に入れてください。または、<span>にクリックハンドラと適切なCSSを使用するか、アンカータグを使用してください。

Answer 3

W3 specification of the BUTTON tagによると、あなたは<button>タグ内に以下のタグをはめ込むことができません。

• INPUT
• LABEL
• BUTTON
• FIELDSET
• TEXTAREA
• を選択

ただし、他のすべてのブロックタグとインラインタグは許可されています。

Answer 4

W3C spec saysとして、ボタン内にインタラクティブコンテンツ（クリック可能なコンテンツ）を表示することはできません。

コンテンツモデル： フレーズのコンテンツですが、インタラクティブコンテンツの子孫は存在しない必要があります。

この質問は少なくとも文脈ではpossible duplicate of thisであり、その回答はここで認定されています。

Answer 5

は、私はdivの内側に入力を入れて、彼らはIE、FFとChrome上で私のテストで働いていたCSS

とボタンのようなdiv要素の外観を作っ

https://jsfiddle.net/DeivissonSedrez/0z6mq5yk/1/

<div class="fakeButton">Upload button 
     <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input> 
</div> 
    <style> 
     .fakeButton{ 
      width: 100px; 
      height: 100px; 
      position: relative; 
      border:1px solid #000; 
      border-radius:3px; 
      text-align:center; 
      font: 15px arial; 
      line-height:90px; 
      box-shadow: inset 0 2px 3px 0 rgba(255,255,255,.3), inset 0 -3px 6px 0 rgba(0,0,0,.2), 0 3px 2px 0 rgba(0,0,0,.2); 
      background-image: -webkit-linear-gradient(#EEEEEE, #D8D8D8 130%); 
      background-image: -moz-linear-gradient(#EEEEEE, #D8D8D8 130%); 
      background-image: -o-linear-gradient(#EEEEEE, #D8D8D8 130%); 
      background-image: linear-gradient(#EEEEEE, #D8D8D8 130%); 
     } 
    </style> 

それを試してみてください

私は助けてくれるといいですか