QA@IT

bootstrap3のinput[file]のずれ

5509 PV

https://gist.github.com/znz/d2890d8c4b168ddcd50d#file-bootstrap3-input-file-html のようなHTMLで bootstrap 3.3.0 の input[type="file"] を使おうとしています。

Google Chrome だと下につけたスクリーンショットのようにボタンとファイル名がずれて表示されてしまう (line-height:1 をつけるとましになる) のですが、どうすればずれなくなるのでしょうか?

また Firefox だと form-control クラスをつけているとボタンが枠からはみ出してしまうのですが、これは使い方が間違っているからでしょうか?

回答

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

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

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

編集 履歴 (0)
  • 情報ありがとうございます。
    form-controlは https://gist.github.com/clyfe/6304508 などを参考にした部分でついていたので外すことにしました。
    まだちょっとずれている気がしますが、`line-height: 1` で良さそうということでこのままいこうと思います。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。