Edited at

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

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