ファウンデーションを使用したファイル入力のスタイル設定

Question

私はファウンデーションを使用しています。ファイル入力に関するドキュメントでは、一般的な入力要素だけは見ていません。しかし、ファイルの入力をスタイリングするのは簡単ではありません。また、すべてのブラウザでフォーム全体のデザインに一貫性を持たせたい場合は、さらに多くのことを考えてください。

は私がStyling an input type="file" buttonまたはhttps://github.com/filamentgroup/jQuery-Custom-File-Inputのようないくつかのソリューションを見てきましたが、私は基礎中の特定の何かがすべてでは動作しません通常ラッピングdivのスタイルとして、がありますかどうかを知りたいと思った（div.large-3.columnsなど） 。

あなたはどのようにしますか？

Answer 1

ボタンだけは必要ですか？またはファイルの住所もフィールドに表示されますか？唯一のボタンは最も単純ソリューションはdemo

<a class="wrapper"> 
    button name 
    <input type="file"/> 
</a> 

.wrapper { 
    width: 100px; 
    height: 30px; 
    overflow: hidden; 
    position: relative; 
} 
input { 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    font-size: 50px; /* some huge for cursor pointer hack */ 
} 

ある場合も、あなたは私だけのinputタグに.buttonクラスを適用するいくつかのブラウザsee article

Answer 2

のための疑似クラスを使用することができます。 それは私のために十分に見えます。