inputタグのfileやsubmitを画像にする方法

htmlcss_2

HTMLは、画像化したinputタグをlabelタグで囲み、labelタグのforをinputのid
に渡してあげる。

CSSは画像にマウスカーソルを持って行ったときに指印になるようにし、inputを消す。

画像ではなく、テキストで装飾することも可能。

CSSのlabel>.uploadを適宜装飾すれば完了。

jQueryやJavascriptとの併用の記事は多かったのですが、面倒臭いのでHTMLとCSSだけで解決する方法でした。

17 2月 2017

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA