html 美化input file,Input[type=”file”] 显示效果美化方法 | 智慧宫

Html中input可以作为上传图片代码如下

但是演示非常不好看，下面做一番美化处理，效果如下：

文件上传美化前后对比

美化方法隐藏 input 标签

使用 label 标签在input标签位置显示；

用js获取 input 中上传的文件名称，并在 lable 标签中显示

input[type=”file”] 美化之 Html/**

* input 文件上传 Html

*

* @author 智慧宫

* @link https://www.hanost.com

*/

input[type=”file”] 美化之 CSS

使用opacity: 0; 隐藏input标签，美化lable标签；/**

* input 文件上传 CSS

*

* @author 智慧宫

* @link https://www.hanost.com

*/

.img-upload {

position: relative;

display: inline-block;

width: 100%;

margin-bottom: 0;

height: calc(3.5rem + 28px);

}

.img-upload