[HTML5] <input type="file">のデザインをもっと簡単に変更

<input type="file"> そのものにはCSSが効かず、スタイルを変更できません。そこで、<input> 自体は非表示にし、<label> で修飾します。

サンプルソース

HTML

<style>
label {
  color: white;  
  background-color: red;
  padding: 6px;
  border-radius: 12px;
}
</style>

<label for="file_photo">
    ＋写真を選択
    <input type="file" id="file_photo" style="display:none;">
</label>

⇒ デモソースはこちら

参考URL

• 【HTML,CSS】File inputのデザインを変える超簡単な方法！
• HTMLのinput type="file"を自由な見た目にする
• input[type=file]をデザイン的になんとかする方法
• input type="file" のボタンをオリジナルのボタンにする。