Bootstrapでかっこ良いファイルインプットフォームをつくる

 
Bootstrap2から3に変わった時に今度こそファイル選択フォームもちゃんとイケてるデザインになっているだろうなーと思っていたら、、、Bootstrap3でも変わらずダサいままでした。。。

こうなったら自作するしか無い!ということでちょっとイケてるファイル選択フォームを自作しました。

プログラミングやWordPressを習得するのに一番近道な方法とは?

Bootstrap3でイケてるファイル選択フォームサンプル

Bootstrap3_ファイルインプットデモ

※divのstyle直書きしている部分は任意で修正してくださいね!横着しちゃいましたから!
※もちろんJqueryは入れてくださいね!

 
デモページ

 
仕組みの説明に関してはこちらのtotakke websiteさんのサイトを参考にしてくださいね!

完全に参考にさせて頂きました!ありがとうございます!

totakke websiteさんのBootstrap2のものを参考に今回Bootstrap3版を作成させて頂きました!

 
変わっている部分はボタンとテキストボックスをくっつける部分が主に違いますね。

divのclass="input-prepend"class="input-group"に変わってますね。

皆さん、是非Bootstrap3でもこのオシャレなinput fileを使っちゃってくださいね!

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA