IEのファイルアップロードボタンと奇妙なテキストカーソルの動作

Question

ブラウザの標準ファイルアップロードフォームではなく、典型的なhtmlボタンのように書式設定されたアップロードボタンを作成しました。アプローチは、アンカー要素をスタイルし、透明なファイル入力要素を上に重ねることでした。

このアプローチはIE以外のすべてのブラウザでうまく機能します。 IEでは、ユーザーがアップロードボタンをクリックすると、ユーザーがテキスト入力ボックスをクリックしたようにテキストカーソルが表示されます。ユーザは、ボタンをダブルクリックすることによって、ファイルアップロードダイアログをトリガすることができる。しかし、これは私たちが望む、あるいは誰もが期待している行動ではありません。

なぜこのようなことが起こっているのですか？私はここでの問題を実証jsfiddleを設定している：あなたの絶対要素にCSS

Zインデックス

を追加 http://jsfiddle.net/davelee/yfSmc/3/

Answer 1

ファイル入力要素の幅と高さを設定すると、問題がie8とie9の両方で修正されます。

http://jsfiddle.net/davelee/yfSmc/4/

Answer 2

試してみます。

最低要素

z-index:1 

最高

z-index:2; 

とコンテナ要素上のzインデックスを設定します。

Answer 3

私はこの正確な問題に取り組んできました。 IEでは、ボタンの左側にテキスト入力として機能する小さな領域があります（手動で入力するファイル名用）。私が考え出した解決策は、入力フィールドのフォントサイズを大きくすることでした。不思議なことですが、フォントサイズを大きくすると、入力フィールドの「ブラウズ...」ボタンの部分が増え、クリック可能な領域が増え、アップロードボタンのテキスト部分が押し出されます。ボタンは透明になっているので、誰も賢くはありません:)

Answer 4

入力ファイルへの外部divを適用してフローを非表示にし、幅を入力ファイルに適用します。font-size、margin-否定的に残った。

<div class="outerWrap"> 
    <input type="file" id="fileUpload"/> 
</div> 

とCSSは次のようになります。

.outerWrap { 
    width: 200px; 
    height: 50px; 
    overflow: hidden; 
} 
#fileUpload { 
    width: 210px; 
    height: 50px; 
    margin-left: -10px; 
    font-size: 70px; 
} 

幅とのmargin-leftあなたの条件に応じて調整します。参照用

は、このリンクを得た：http://jsfiddle.net/TrdJ8/ をし、フォントサイズで固定し、IE-9

Answer 5

素敵にIE11でこのバグを、それを試してみる：0;