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

  • 84
    Like
  • 6
    Comment
More than 1 year has passed since last update.

<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