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

このエントリーをはてなブックマークに追加

ブログランキング・にほんブログ村へ

ウェブ関連

htmlcss_2

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

<label for="co_img" class="upload">
<img src="images/bt_file.png">
<input type="file" id="co_img">
</label>

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

.upload img {cursor: pointer;}
.upload input {display: none;}

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

<label for="co_img" class="upload">
<img src="images/bt_file.png">
<input type="file" id="co_img">
</label>

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

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

17 2月 2017

このエントリーをはてなブックマークに追加

ブログランキング・にほんブログ村へ

ウェブ関連

コメントを残す

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