私はいくつかの場所からこれについて読んでいます。入力タイプ= "ファイル"のスタイリング
は私がしようとしている方法はこちらをご覧ください：http://www.quirksmode.org/dom/inputfile.html
私はそれを動作させることができませんでした。だから、CSS/HTMLメソッドを試してみました。これはFirefox、Chrome、Safari、Opera（すべての最新バージョン）でうまく動作しますが、IE8では見当たりません。
クリックしてもうまくいきません。うまくいきません。ダブルクリックすると動作します。
これをクリックするだけでどのように動作させることができますか？
現在IEの条件付きコメントを使用して、IEで選択ボタンをダブルクリックするよう指示しています。このサイトは現在デザインされており、まだユーザーには公開されていないため、できるだけライブになる前にこの問題を解決したいと考えています。
あなたの問題には2つの解決策があります。 を.fileクラスに使用しているため、アップロードコントロールに通常表示される実際の[参照...]ボタンは表示されません。
最初の解決策は、ユーザーがIEを使用しているときに、通常のスタイリングされた「ブラウズ」ボタンで空想の「選択」画像を置き換えるCSSを設定することです。
2番目の入力はFileAttachmentの入力サイズで再生されるため、「参照...」ボタンは「選択」画像の位置に収まります。そこから、ボタンのz-indexプロパティがイメージのものより高いかどうかを確認するだけです。
これらのソリューションがお客様のニーズを解決するかどうかをお知らせください。
：D
あなたがIEで参照ボタンのスタイルを設定することはできますか？どうやって...？ 2つ目はうまくいきませんでした。画像のZ-インデックスを参照ボタンよりも上に置くと、参照ボタンをクリックすることはできません。正確に同じサイズでない場合、画像は参照ボタンの同じサイズに非常に近いはずです。 – L84
大変申し訳ございませんが、ボタンのZインデックスをイメージよりも高く設定する必要があります。私はすぐに私の答えを編集します。ところで、あなたのCSSはすでにブラウズボタンのスタイルを設定し、.fileクラスのフィルタプロパティを削除してチェックアウトします:) –
ああ、私のZ-Indexはイメージよりも高くなっています=>また、ファイル入力。私はそれを私の "選択"イメージを持っていると一緒に暮らすことができます。ファイル入力を変更して黄色で表示されないようにする方法はありますか？ありがとう！ – L84
実際にIEは違う方法でファイルのアップロード制御を行います。 ファイルのアップロードコントロールをテキストボックスと入力ボタンとして理解しています。ファイルのアップロードを「クリック」するか「選択」ボタンを押すと開くダイアログボックスが開きますが、ファイルアップロードのテキストをクリックすると、このテキストボックスを再度クリックすると、開いているダイアログボックスが開きます。これはIEであらかじめ定義されたバグだと言えるかもしれません。そのため何もできませんし、ほとんどのユーザーがこの問題を知っています。
は、私はあなたが望むどのようにボタンのスタイルを設定し、あまりにもすべてのブラウザでワンクリックにそれを保つのを助けるソリューションを得ました。
divを基本的に作成し、クラスまたはIDを指定します（例：sakeではthisを「outer_div」と呼びます）。
ファイルの入力を「outer_div」内に配置し、この例では「file_input_name」と呼ぶこともできます。 「outer_div」あなたのボタンは、これが機能するためには、同じ幅の特性を有していることを確認し、それを
#outer_div{
cursor:pointer;
overflow:hidden;
display:block;
float:left;
position:relative;
width:83px;
height:25px;
background:url(your button image goes here) no-repeat;
}
を、次の特性を付与するために
次はCSSを付属しています...
。
次file_input_nameためのCSS：
#file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
}
これはトリックを行う必要があります。基本的には、ブラウズボタンがファイルURLの場所ではなく背景のイメージの上にくるようにファイルの入力を行います。
私はこれを自分の行いました。それはIEとFirefox/safari/chromeで動作します。
どうやったらどうやったらいいのか教えてください。
これはダブルクリックとシングルクリックの問題を解決しませんが、入力ボックスをカバーしている領域はダブルクリックするかボタンを覆う領域をダブルクリックする – Matilda
なぜなら、それらをダブルクリックする必要があるのは、それが「テキスト領域」であるからです。
ここの最初の画像はIE8アップロードコントロールです。どのようにテキストボックスとボタンがあるか注意してください。ユーザーはボタンを1回クリックするか、テキストボックスをダブルクリックしてボタンを表示します。
[argは、申し訳ありませんが、私の評判は写真のために十分に高くない]
あなたがテキストエリアには、あなたがシングルクリックになりたいものをオーバーラップし、それは、ダブルクリックを必要とするように引き起こしている、ことをオーバーレイしています。
この次の画像は、不透明度のない同じファイルアップロードコントロールで、上にボタンがあり、IE8のDOMインスペクタのアウトラインがあります。青色の四角形の右端の部分をクリックすると、1回のクリックが機能します。また、ボタンの上にファイル入力からオーバーレイされたテキスト編集キャレットに注意してください。
[画像省略]
ソリューションは、あなたがそれをしたいブラウズボタンを配置する/位置にファイル隠されたファイルの入力のサイズを変更することです。
ワンクリックで作業できる素敵なソリューションは、ラベルエレメントとそれを入力に接続できるプロパティ "for"を使用することです。このソリューションのもう1つの重要な要素は、input要素にfilter：alpha（opacity = 0）を適用することです。
HTML：
<label for="fileupload">
<input id="fileupload" type="file" >
<p>click here</p>
</label>
CSS：
label {
background-color: #ECECEC;
display: block;
width: 600px;
height: 600px;
cursor: pointer;
}
input[type="file"] {
width: 100%;
height: 100%;
z-index: 100;
position: relative;
opacity: 0;
filter:alpha(opacity=0);
cursor: pointer;
}
これは正しい解決策です！完璧に感謝します。 – MatterGoal
いくつかブートストラップ魔法を使用するには、私はそれをやった、超簡単です。
[OK]を、後のあなたの頭のラベルにブートストラップCSSへのリンクを挿入し、次の操作を行います。ブートストラップCSSによるスタイルの入力タイプのファイルを作成します<div class="fileUpload btn btn-primary"> <span>Upload</span> <input type="file" class="upload" /> </div>
、。
そして今、トリッキーな部分
：.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
そして、それがすべてですが、今は、スタイルと機能ボタン（入力タイプのファイルを）持っています。
私は同じ問題があったので、this articleが見つかりました。あなたは詳細を確認することができます。
あなたは、CSSで
input.file{
width:0 ;
height:0;
} //supposing your file input has class of .file`
を適用してみてください入力ファイルと、クロスブラウザのサポートのデフォルトのIE8の動作を損なうことなく、デフォルトの入力ボタンを非表示にすると、あなたの良いそれがされています
行くしようとした場合私はこの質問をして以来、私は今、スタイリングファイルの入力に使用する方法です。この情報はCodropsからのものです。それははるかに詳細に入り、いくつかの例を提供しますが、ここでは基本です：
HTML
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>
JS
<html class="no-js">
<head>
<!-- remove this if you use Modernizr -->
<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
</head>
</html>
を確認する必要がでCSS
.js .inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
max-width: 80%;
font-size: 1.25rem;
/* 20px */
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 0.625rem 1.25rem;
/* 10px 20px */
}
.no-js .inputfile + label {
display: none;
}
.inputfile:focus + label,
.inputfile.has-focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
/* pointer-events: none; */
/* in case of FastClick lib use */
}
.inputfile + label svg {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
margin-top: -0.25em;
/* 4px */
margin-right: 0.25em;
/* 4px */
}
JS入力タイプ=「ファイルを」スタイリング
;(function (document, window, index)
{
var inputs = document.querySelectorAll('.inputfile');
Array.prototype.forEach.call(inputs, function(input)
{
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener('change', function(e)
{
var fileName = '';
if(this.files && this.files.length > 1)
fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
else
fileName = e.target.value.split('\\').pop();
if(fileName)
label.querySelector('span').innerHTML = fileName;
else
label.innerHTML = labelVal;
});
// Firefox bug fix
input.addEventListener('focus', function(){ input.classList.add('has-focus'); });
input.addEventListener('blur', function(){ input.classList.remove('has-focus'); });
});
}(document, window, 0));
... FML :) – tybro0103