CSS 上传表单file美化

阅读(3658)

在以前,看到的file美化模拟,基本都是用一个div,定位到file下面,然后file透明化,让视觉看到的其实是下面的div,然而点击到的却是透明的file,觉得还是有点麻烦。其实,还可以更简单点,如下:

html

<label class="btn-upload" for="upload">本地上传</label>
<input type="file" id="upload">

css

#upload{width: 0px; height: 0px; font-size: 0px; line-height: 0px; outline: none;}

关键点

将file隐藏,但不能display:none或visibility:hidden,然后用label的for属性指向它,就可以了。

Tags:

仅有 1 条吐槽

  1. 思路很赞!