input=”file” のデザインを変更する簡単な方法


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]