自定义input file文件上传的默认样式

最新推荐文章于 2023-12-01 19:08:19 发布

muzidigbig

最新推荐文章于 2023-12-01 19:08:19 发布

阅读量5.3k

点赞数 5

分类专栏： css问题锦囊文章标签： input file file自定义样式 input自定义 file未选择任何文件

本文链接：https://blog.csdn.net/muzidigbig/article/details/80541789

版权

css问题锦囊专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Web页面中，在需要上传文件时基本都会用到<inputtype="file">元素，它的默认样式：

chrome下：

给input加上 style="border: 1px solid red;"如左图所示的样式

IE下：

不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。

根据用户的需求，设计风格，改变其显示样式的场合就比较多了。

如果，要像下面一样做一个bootstrap风格的上传按钮该如何实现。

搭建上传按钮所需的基本元素

<spanclass="">

</span>

效果（chrome）：

外围之所以没有换成div，是因为在IE7-浏览器中，只要不是设成inline，它的宽度全都会撑开到能撑到的宽度。如果设成inline，那元素的宽度就无法调整，所以这里用span然后设成inline-block能解决这样的问题。

方式一：增加样式将<span>上传与<input>变成一行

<spanclass="fileinput-button">

</span>

css:

.fileinput-button {

position: relative;

display: inline-block;

}

.fileinput-button input{

position: absolute;

right:0px;

top:0px;

}

效果：

默认是没有浅蓝色边框，只有鼠标去点击后，才会显示，这里显示出来是为了看得清楚。

通过将外围的span设成display:relative，将input设成display:absolute的方式让他们都脱离文档流。

通过将input限定在外围的span中进行绝对定位的方式让本来两行显示的变成一行显示。

实际上这里已经overflow了，真正的宽度是“上传”文字的宽度，修改fileinput-button样式增加overflow: hidden

.fileinput-button {

position: relative;

display: inline-block;

overflow: hidden;

}

效果：

很有意思，能看到上边后右边的蓝色边框了吧，其实就是把左边和下边的溢出部分给隐藏了。

这时候用鼠标去点击“上传”两个字实际上是点在input上，能够显示“打开”对话框，因为显示层级上input要比“上传”更靠近用户。

注意input定位中的right，为什么不用left定位。

当我们改成left后。

效果（chrome）：

效果（IE）：

在chrome下input元素中的选择按钮露出来，但是没关系，可以通过后面的设透明的方式把它透明掉。

但是在IE下确是会把输入框露出来，关键是鼠标移到输入框上时，指针会变成输入状态，这个就很没法处理了。

通过right的定位方式把输入框移到左边去的方式，可以在IE下回避出现鼠标指针变成输入态的情况。

透明input元素

css：

.fileinput-button {

position: relative;

display: inline-block;

overflow: hidden;

}

.fileinput-button input{

position: absolute;

left:0px;

top:0px;

opacity: 0;

-ms-filter: 'alpha(opacity=0)';

}

效果：

input完全不见了踪影，点击“上传”依然有效。

可以支持IE8+。

方式二：通过div盒子的形式

css：

div.file{

display:inline-block;

width:100px;

height:100px;

line-height:100px;

position:relative;

overflow:hidden;

color:red;

background-color:aqua;

}

div.fileinput{

width:100px;

height:100px;

position:absolute;

left:0px;

top:0px;

zoom:1;

filter:alpha(opacity=0);

opacity:0;

font-size:20px;

margin-left:-240px

}

引入bootstrap，并添加按钮样式

head中增加外部css和js的引用。

增加按钮样式。

</span>

效果：

解决大小问题

如果为fileinput-button样式增加width:100px，将外围的span设成宽100px，会发现点击下部是没有反应的，原因就是input是默认大小，无法覆盖下部。

可以通过为input设置一个很大的字号将其撑大的方式来解决覆盖问题，这里就设个200px。

.fileinput-button input{

position:absolute;

right: 0px;

top:0px;

opacity: 0;

-ms-filter:'alpha(opacity=0)';

font-size: 200px;

}

这样就能解决覆盖问题。

完成。

参考：jQuery-File-Upload

如果是要兼容IE7-可以参考jQuery-File-Upload中的写法。

代码：

<!DOCTYPE html>

<html>

<head>

<style>

.fileinput-button {

position: relative;

display: inline-block;

overflow: hidden;

}

.fileinput-button input{

position:absolute;

right: 0px;

top: 0px;

opacity: 0;

-ms-filter: 'alpha(opacity=0)';

font-size: 200px;

}

</style>

</head>

</span>

</div>

</body>

</html>

去掉“未选择任何文件”这个手移上去提示

利用label代替input中的上传按钮，input隐藏即可，此时未选择任何文件不在显示

<label for="maintainUploadFile">选择文件</label>
<input type="file" id="maintainUploadFile" style="display:none;">

如有不足请多多指教！希望给您带来帮助！

muzidigbig

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
自定义input file文件上传的默认样式

Web页面中，在需要上传文件时基本都会用到<inputtype="file">元素，它的默认样式：chrome下：给input加上 style="border: 1px solid red;"如左图所示的样式IE下：不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。根据用户的需求，设计风格，改变其显示样式的场合就比较多了。如果，要像下面一样做一个...
复制链接

扫一扫