修改 input file 样式

最新推荐文章于 2021-08-19 00:48:36 发布

java_runner

最新推荐文章于 2021-08-19 00:48:36 发布

阅读量1.1k

点赞数

分类专栏： CSS Js 文章标签： input file样式修改input file样式文件选择样式

本文链接：https://blog.csdn.net/jiahengzhang/article/details/38367623

版权

Js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

普通的 input file 样式，会根据浏览器的不同而显示不同的效果，IE显示的是，左边一个文本框，右边一个按钮的形式，谷歌显示的是，左边一个按钮，右边一个label，火狐与谷歌相同，但是按钮上的文字又不一样，网上的一些文章写修改file的样式，大多都是用一个文本框，一个按钮或是超链接等等其他的标签来替换，这种方法是可以达到input file一样的效果，但是，我在一个项目中，涉及到异步上传文件，在这中，我发现了一个问题，就是用上面的那种方法，上传时，无法将文件传输到服务器中，至于是什么原因，暂时还未不清楚。废话不多说，下面就是修改样式的方法：

1：

<style type="text/css">
.input_text{// 文本框样式

}
.input_button{// 按钮样式

}
.input_file{// input file 样式，宽高为0，或display:none
  width: 0px;
  height: 0px;
}
</style>
<script type="text/javascript">
function checkFile(){
  document.getElementById("file1").click();
}
</script>

<input type="text" class="input_text" id="txtFile" name="txtFile" value="" />
<input type="button" class="input_button" value="浏览..." οnclick="checkFile()" />
<input type="file" class="input_file" id="file1" name="file1" οnchange="document.getElementById('txtFile').value=this.value" />

2：(我用的方法。将file放在a中，并设置为透明，使用span文字)

display:inline-block;

width:80px; height:32px;

background:red;

position:relative;

overflow:hidden;

}
a:hover{

background:green;

}
._label {
display:block;
position:relative;
}
._span {
position:absolute;
float:left;
line-height:30px;
left:10px;
cursor:text;
font-size: 16px;
color: #000000;
}
input{