QA@IT
«回答へ戻る

回答を投稿

ドキュメントに挙げられてる例では、input[type=file] には form-control クラスがついていないので、つける必要はないと思います。

ボタンとテキストのずれについては、body から継承している font-size: 14px が原因のようで、Chrome や Firefox のデフォルトである font-size: 11pxinput[file] につけるか、line-height: 1 をつけるという解決でよいと思います。

ブラウザに依存せず、自由にスタイルを設定する必要があるなら、input[file]opacity: 0 をつけて、表示用の要素を使う手法もあります。

[ドキュメントに挙げられてる例](http://getbootstrap.com/css/#forms)では、`input[type=file]` には `form-control` クラスがついていないので、つける必要はないと思います。

ボタンとテキストのずれについては、`body` から継承している `font-size: 14px` が原因のようで、Chrome や Firefox のデフォルトである `font-size: 11px` を `input[file]` につけるか、`line-height: 1` をつけるという解決でよいと思います。

ブラウザに依存せず、自由にスタイルを設定する必要があるなら、`input[file]` に `opacity: 0` をつけて、表示用の要素を使う手法もあります。

- [input[type=file]をCSSで加工する - jsdo.it - Share JavaScript, HTML5 and CSS](http://jsdo.it/goto_jp/rWcL)
- [grevory/bootstrap-file-input](https://github.com/grevory/bootstrap-file-input)