CSSをブラウズボタンに適用する方法

Question

私のウェブページに<input type="file" />を使用しています。私は、ボタンと他のコントロールのCSSクラスが異なっています。しかし、私は上記のタグのために表示されるブラウズボタンにスタイル、クラスを追加できません。

デフォルトの外観を変更する方法はありますか？

ありがとうございます。

Answer 1

これはできません。 <input />全体にのみスタイルを適用できます。

CSSハックを使用して、お気に入りの画像と画像に置き換えることができます：ホバー。

height:プロパティはFirefox 3.6では機能しません。代わりにfont-size:を使用して高さを拡大することができます。

私は、例を挙げて作成しました：http://timc.idv.tw/html5-file-upload/; 2回目のデモのCSSを調べてください。

Answer 2

ファイルの入力を直接スタイルすることはできませんが、実際にはいくつかの擬似スタイリングを与えたり、見えないようにすることができますが、クリック可能です。 Quirksmodeでこれを行う方法に関する記事があります。

Answer 3

<input type="file" />コントロールは、スタイルを作るのが非常に難しいです。

Hereは、somearticlesです。

Answer 4

また、肌が荒いスタイリングフォームの要素にはsome nice librariesがあります。選択とアップロードのフィールドには統一性があります。

Answer 5

CSSでファイル入力ボタンのスタイルを設定することはできません。これはあなたがスタイルできない唯一の要素ではありません。他の入力にはスタイルを受け入れないものがあります。多くのタイプの入力を見るには、fiddleを見てください。あなたのブラウザに基づいて、いくつかの入力は異なってレンダリングされます。範囲入力や日付入力などの入力は、CSSで編集できないOSレベルのUIを使用しています。

あなたができることはファイル入力を隠し、ファイル入力とトリガートリガーとしてボタンタイプ入力のようなスタイリングを受け入れるdivや別の入力を表示することです。隠れた実際のイベントをクリックして提出するファイル入力。

コード例：

HTML

<input type="file" /> 
<label>Select file to upload: <input type="button" /></label> 

CSS

input[type="file"]{visibility:hidden; width:0;} 

はJavaScript：fiddle in action

で

var fileInput = document.querySelectorAll('input[type="file"]')[0], 
    fakeFileInput = document.querySelectorAll('label')[0], 
    clickEvent = document.createEvent('MouseEvent'); 
clickEvent.initMouseEvent('click',true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null); 

fakeFileInput.addEventListener('click', function(event){ 
    fileInput.dispatchEvent(clickEvent); 
}, false); 

ルック

あなたの質問の答えは：いいえ、不幸にもファイル入力をスタイルできません。