input[type="file"]样式修改

默认情况下，html中的<input type="file"/>标签展示的效果是自带的，为了美观和体验，我们需要对他进行一番修饰，让他看起来，更加的优雅。修饰的思路是，让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让input的父级元素相对定位，然后让input元素绝对定位，并且可见度为0，就是看不见，但是点击也能出现选择文件的效果，input元素再增加一个兄弟节点，就是我们说的按钮，选择文件对外显示按钮样式效果。

html 元素结构：

<div class="upload-wrap anticon" nv-file-drop="" uploader="uploader">
        <input class="file-ele" type="file" file-model="image" name="image" nv-file-select uploader="uploader" multiple />
        <div class="file-open"><em class="icon icon-upload"></em>&nbsp;upload</div>    
</div>

css 样式：

.upload-wrap{
    position: relative;
    display: inline-block;
    overflow: hidden;
    border:1px solid #2d78f4;
    border-radius: 3px;
}
.upload-wrap .file-ele{
    position: absolute;
    top:0;
    right:0;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
}
.upload-wrap .file-open{
    width:90px;
    height:30px;
    line-height:30px;
    text-align: center;
    color:#fff;
    background: #3385ff;
}

展示的效果如下：

为了让上传按钮，显示的更加生动，我们可以考虑让按钮增加一个图标，传统的icon做法是，指定一个icon的背景或者直接放置img元素，这里介绍一个新的做法，图标字体--iconfont，这也是很火的一种做法。传统雪碧图sprite方法，有他的好处，也有不方便的时候，新增，修改图标，还需要重新设置元素位置，还需要生成新的图片，图标字体相对来说要快的多，但是也不是没有门槛的。

首先就是需要原始的图标，再一个就是需要把图标转换为图标字体，将图标转换为字体，现在阿里巴巴图标矢量库有专门的教程和方法。这里不再多说。

我这里使用的是一个成品的图标字体，通过npm install antd-iconfont下载安装到本地，然后拷贝如下文件到css目录中。

在页面上，我们只需要额外引入iconfont.css文件。

<link rel="stylesheet" type="text/css" href="/css/font/iconfont.css"/>

在iconfont.css文件中，定义了图标字体，并且将常用的icon都做了样式定义。这里需要上传图标，所以需要icon样式的元素再加上icon-upload样式即可。 

<div class="file-open"><em class="icon icon-upload"></em>&nbsp;upload</div>

显示效果：

默认,icon-upload样式展示的图标是倾斜的，我们可以增加样式，将他扶正。

.upload-wrap .icon-upload{font-style: normal;}

最终的样式如下：

至此，选择文件的默认样式就被我们修改了。 

我们可以看看字体定义的具体代码：

这里图标使用了before伪类，而且使用的样式名称是content，具体的值"\e6b6"就是对应图标的值。 

写这篇文章，主要还是看到百度网盘的上传按钮就是这么来实现的：

图标字体还是挺受欢迎的。