ファイル選択ボタンのCSSカスタマイズ

DEMO

input[type="file"] のファイル選択する要素本体は隠し、擬似的なファイル選択ボタンを表示する形式
マシンリーダブルにするため、 display: none; を使わずに要素本体を非表示にする
この形式の場合、「選択されていません」や選択済みのファイル名表示部分を非表示にすることが可能

CSS指定なし

擬似的なファイル選択ボタンにCSSカスタマイズ

コード

HTML

<label class="file_upload_label">
  <input type="file" />
</label>

CSS

/* 擬似的に表示される「ファイル選択」のボタン */
.file_upload_label {
  position: relative;
  padding: 4px 10px 3px 5px;
  background: linear-gradient(to bottom, #fff, #f5f5f5);
  border-color: #E1E1E1 #BBBBBB #BBBBBB #E1E1E1;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 140%;
  font-size: 13px;
  color: #444444;
  cursor: pointer;
}

/* 擬似的に表示されるボタンのアイコン */
.file_upload_label::before {
  content: "📷";
  width: 17px;
  height: 17px;
  display: inline-block;
  vertical-align: middle;
}

/* 擬似的に表示されるボタンのテキスト */
.file_upload_label::after {
  content: "ファイルを選択";
}

/* 非表示となるファイル選択のinput要素本体 */
/* マシンリーダブルにするため、display: none; を使わない */
.file_upload_label input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}