27
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTMLのinput type="file"を自由な見た目にする

Last updated at Posted at 2014-05-25

#概要
Youtubeとかでデフォルトのとは違うボタンでファイル選択ダイアログが開く。
あれ良いなーと思って見てみたら、かなり簡単だった。
#サンプル
完成品(Plunker)
#説明
input type="file"って全域にクリック判定があるので、見せたいサイズにしたらopacity:0で透明にする。
そしたら、背景に自分の見せたいデザイン置けば完成。
もちろん背景側になるので、hoverとかはinput側で止まる。
なので、このサンプルでは親要素のhoverと表示要素(子要素)のクラスで見た目変えるようにしてある。
ここにドラッグ&ドロップ捕まえるようにしたりして、前の投稿と掛け合わせれば良い感じ。

27
27
0

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
27
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?