177
138

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-12-14

<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

177
138
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
177
138