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だけで解決する方法でした。