Javascript は使いません。HTML と CSS だけです。
HTML
<label class="file"><div>参照</div><input type="file" name="upf"></label>
CSS
.file input{ display:none; } .file div{ cursor:pointer; border:1px solid #ccc; padding:6px; text-align:center; width:50%; } .file div:hover{ background:#c00; color:#fff; }
サンプル
変更前
ブラウザのデフォルトデザインです。
[mokurenCB]