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

青旅半醒 2022-03-21 04:52 407阅读 0赞

默认情况下，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;  
\}

展示的效果如下：

![20190130175624629.png][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

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

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

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

显示效果：

![20190130182426526.png][]

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

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

最终的样式如下：

![20190130181108820.png][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2][]

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

[20190130175624629.png]: /images/20220321/f2105d8312fe4e27b84fba0c1ec4510d.png
[Link 1]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20220321/d11217702a4842b388687dd197877e5b.png
[20190130182426526.png]: /images/20220321/3870694399eb4b2da2729c2a7e0878d0.png
[20190130181108820.png]: /images/20220321/a95546b70c9d4d719429ad24c8dd6814.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: /images/20220321/b95934e67a3540d8b113f157ec4c9656.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2]: /images/20220321/ccf9f419f0554b44a4034b9a7925e907.png