入力のサイズを変更する= firefoxの「ファイル」ブラウズボタン？

Question

CSSまたはJSを使用して、入力タイプのサイズを変更できるかどうか= FirefoxのFirefoxの[参照]ボタンはありますか？

私はあなたがボタンのテキストを変更することはできませんが、私がする必要があるのは、このボタンをFirefox用に広くすることだけです。したがって、-moz cssルールを使用すると完璧です。

Answer 1

スタイリングファイルの入力ボタンは、セキュリティ上の理由から非常に制限されています。いくつかの回避策がありますが、完璧なものはありません。 QuirksModeでこの記事をチェックアウト：

http://www.quirksmode.org/dom/inputfile.html

Answer 2

編集：他の人が、私は次のリンクを参照してしまうの下に、Firefoxがメソッドをsuuportしません指摘してきたようにhttp://www.quirksmode.org/dom/inputfile.html

かなりシンプルなソリューションをされ、次の。私はラベルにクラスを追加することをお勧めします。

<label> 
    <input type=file> 
</label> 

CSS彼らは「カスタマイズ」を必要とするとき、多くの場合、何のウェブサイト

label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;} 
label {background:green;width:200px;height:100px;display:block; /* more styles here */} 

http://jsfiddle.net/DVLxp/

Answer 3

：基本的には、ラベルの代わりに、クロスブラウザの問題と幅と高さのバグを回避入力のスタイルファイルアップロードウィジェット：「実際の」ファイルアップロードフィールドを非表示にします。ファイルアップロードフィールドの現在の値を表示するテキストフィールドと、ファイルアップロードフィールドでファイル選択をトリガーするボタンを追加します。ここでは例：

<input id="file" type="file" style="display: none;" 
     onchange="document.getElementById('text').value = this.value;"> 

<input id="text" type="text" readonly><input type="button" 
     onclick="document.getElementById('file').click();" value="Choose file"> 

Answer 4

ここでは主なアイデアです：http://www.quirksmode.org/dom/inputfile.html

そして、これは私のために立派に動作

入力エリアに

input{font-size: 100px;} 

のサイズを変更するための参考になっている可能性があります。

Answer 5

私にとっては、Zhenya Shevchenkoは最高の作業ソリューションの1つを与えました。彼の方法を使用して、我々は、クロスブラウザのファイルの入力ボタンを作成することができます。http://jsfiddle.net/CnHj5/ のFirefoxで動作し、素敵なポインタカーソルが提供されています：http://jsfiddle.net/JHcFR/

<div class="fileInput"> 
    <input type="file" /> 
</div> 

.fileInput { 
    overflow: hidden; width: 500px; height: 200px; background: red; 
} 
.fileInput input { 
    font-size: 200px; opacity: 0; 
    float: right; filter: alpha(opacity=0); /*IE*/ 
} 

Answer 6

はこの1つを試してみてください。

HTML：

<div class="upload"> 
    <input class="upload" type="file" /> 
</div> 

CSS：これは完璧に動作

input.upload { 
    -moz-opacity:0; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    position: absolute; 
    right:0; 
    font-size: 200px; 
    cursor: pointer; 
} 
div.upload { 
    background-color:green; 
    width:200px; 
    height:100px; 
    position: relative; 
    display:block; 
    overflow:hidden;}