もう泣かない！input type="file"のボタン部分をcssでデザインする方法

input type="file" を使って
ファイルを選択する時のボタンがあるのですが
これがなかなかうまくcssが利いてくれなくて困ってました。
※しかも、ボタン部分だけでなく、ファイル名が表示される部分も残しつつです

なんとか解決策が見つかりましたよー

肝はcssの::before 要素。
::before 要素を使ってボタン部分をデザインしてください

もう一つの肝はinput[type="file"]::-webkit-file-upload-button
デフォルトの「ファイルを選択」ボタンの装飾を非表示になるようにcssで調整します

デフォルトのボタンの上にデザインしたボタンを重ねるというイメージですね。

HTML

<div class="file-upload_area">
  <input type="file" id="csv-file" name="files" class="file-upload_input">
</div>

css（SCSS）

//====================================
// input type="file" ボタン
//====================================
input[type="file"]:focus {
  outline: 0;
}
.file-upload_area {
  margin-bottom: 20px;
  position: relative;
  .file-upload_input {
    margin-left: 35px;
    &::before {
      background: #f5faf9;
      border-radius: 2px;
      color: #32a692;
      content: 'ファイルを選択';
      font-size: 14px;
      left: 0;
      padding: 10px 12px;
      position: absolute;
      top: -12px;
    }
  }
  input[type="file"]::-webkit-file-upload-button {
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));
    background-color: transparent;
    border: 0;
    margin: 0 20px 0 0;
  }
}

出来上がり

や〜良かったよかった

See the Pen 「ファイルを選択ボタン」をcssでデザインする by naoko kikuchi (@kikuchi) on CodePen.