【CSS】input type="file"のレイアウトを変更

こんにちは。<input type="file">のレイアウトを変更します。

変更前

なんの変哲もありませんね
これを変えます

変更後

デザインが大したことないのは置いておいて、こういった形でデザインを変えることができます。

やり方

そこまで大したことはやりません。

input type="file"をlabelでくくる。

<label for="hoge">ファイルを選択
  <input type="file" id="hoge">
</label>

<label for="hoge">のhogeは<input type="file">と関連付けるため、idの指定が必要となります。
今回の場合はid="hoge"を指定します。
これを指定しないとファイルアップロードダイアログが出てきません。

CSSを書く

変更後のデザインを実現するため、以下の通りCSSを追加する。

  label {
    color: white;
    background-color: #6dd2ff;
    padding: 12px;
    border-radius: 12px;
  }
  input[type="file"] {
    display: none;
  }

これだけです。かんたんでしょ？

最後に

デザインの変更は至って簡単に実現できました。
デザインは各々自由に編集すればいいのではないかなと。

また、今回の例だとアップロードしたファイルのファイル名が表示されないです。
ファイル名を表示させるには別途JavaScriptの実装が必要となります。