Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

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

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

Demo

Change style of input type="file"

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;
}

追記

確認したブラウザ

ChromeSafari

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;
}

input[type="file"] にとってる padding

input[type="file"]::-webkit-file-upload-button focus 時、上手く outline が取れなかったのでやむを得なく padding: 2px; を.. 。