入力ファイルについてもう少し

<input type = "file" />のスタイリングの問題は非常に古く、おそらく怠laな人だけがこの要素の独自の実装を試みなかったので、Webデザインでは間違いなく重要です。

ただし、ほとんどの場合、ソリューションは非常にあいまいであり、多くの場合、次のオプションを提供します。

• 入力ファイルを画像の上に配置し、透明にします。
• フラッシュを使用します。

同時に、最初のケースでは、すべてのブラウザですべてが比較的同じように機能するように、「議論の余地のある領域」が提案されています-たとえば、<div> </ div>を閉じるなど、一方のブラウザではアクティブでもう一方では非アクティブなエリア。 また、かなりの量のcssがあらゆる種類の負のインデントとフロートですぐに使用されることも追加する価値があります。

2番目のケースでは、フラッシュ要素のアクティブ化に関連する多くの設備はありませんが（たとえばIEで）、個人的には（そしてFFでAdd Block Plusアドオンを使用するすべての人にとって）ブロックボタンはフラッシュ入力ファイルをまったくペイントしません。



約半年前、マイルストーンの別のプロジェクトであり、入力ファイルのスタイル設定の問題に直面して、私はハブに関する素晴らしい記事を見つけました しかし、いくつかの操作の後、私はこの方法を放棄しなければなりませんでした。 そしてまず第一に、隠された要素は消えず、他の要素に対する見えない身体に大きく干渉していないという事実のために。

そして、単純な考えが思い浮かびました-入力ファイルの不要な部分をブロックする必要はありません。この入力が置かれるスペースを制限することができれば。



実際、これを実現する方法の非常に短い例を次に示します。



CSS

< スタイル タイプ = "text / css" >

#file {

位置：相対; top：0px; 左：0px;

パディング：0px; マージン：0px;

テキスト揃え：右;

背景：URL（./ file.jpg）繰り返しなし;

幅：65px; 高さ：20px; オーバーフロー：非表示。

}



#file input {

高さ：20px;

位置：絶対; 右：0px;

不透明度：0; フィルター：アルファ（不透明度= 0）;

}

< スタイル >

HTML

< div id = "file" > < 入力 タイプ = "file" name = "myFile" /> </ div >

*ソースコードはソースコードハイライターで強調表示されました。



例はここにあります 。



<div>コンテナは必要な場所に完全に自由に配置でき、必要なfloat = "left"またはposition = "absolute"はなく、余分なブロッキング要素もありません。

マイナスのうち、ボタンの幅をIEの入力ファイルの[参照]ボタンの幅、つまり74pxに制限することが望ましいと思われます。

UPD： tenshiに感謝します。独創的なものはすべてシンプルです。 アクティブ領域を適切なサイズにするには、入力ファイルのフォントサイズを大きく設定し、コンテナーの幅を大きくします（もちろん、スタイリング用に画像を大きくします）。