<input type="file"> のスタイル変更

フォントサイズを変更した時、 "ファイルを選択" ボタンと "選択されていません" のとこの垂直揃えがうまくいかなくて、、最終的にこうなった。

Demo

CSS

body {
  font-size: 14px;
}

<!-- こっから -->
input[type="file"] {
  margin: 0;
  padding: 2px;
}

input[type="file"],
input[type="file"]::-webkit-file-upload-button {
  font: inherit;
  margin: 0;
}

input[type="file"]::-webkit-file-upload-button {
  padding: .1em .5em;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #e7e7e7;
  background: -webkit-gradient(linear, left top, left bottom, from(#e7e7e7), to(white));
  box-shadow: inset 10px 0 12px -12px rgba(0, 0, 0, 0.4), inset -10px 0 12px -12px rgba(0, 0, 0, 0.4);
  line-height: normal;
}

input[type="file"]::-webkit-file-upload-button:focus {
  outline-offset: -2px;
}

追記

確認したブラウザ

Chrome と Safari 。

Firefox では input[type="file"] にフォントサイズの指定してあげるとサイズが変更されるのを確認した。

input[type="file"] {
  margin: 0;
  padding: 2px;
  font-size: 14px;
}

input[type="file"],
input[type="file"]::-webkit-file-upload-button {
  font: inherit;
  margin: 0;
}

input[type="file"]::-webkit-file-upload-button {
  padding: .1em .5em;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #e7e7e7;
  background: -webkit-gradient(linear, left top, left bottom, from(#e7e7e7), to(white));
  box-shadow: inset 10px 0 12px -12px rgba(0, 0, 0, 0.4), inset -10px 0 12px -12px rgba(0, 0, 0, 0.4);
  line-height: normal;
}

input[type="file"]::-webkit-file-upload-button:focus {
  outline-offset: -2px;
}