input type="file"在各个浏览器下的默认样式,以及修改自定义样式

时间:2023-03-08 15:44:19

一、<input type="file"/>在各个浏览器中的默认样式:

系统 浏览器 样式效果 点击效果
mac google input type="file"在各个浏览器下的默认样式,以及修改自定义样式 点击按钮和输入框都可以打开文件夹
mac firfox input type="file"在各个浏览器下的默认样式,以及修改自定义样式 点击按钮和输入框都可以打开文件夹
mac safari input type="file"在各个浏览器下的默认样式,以及修改自定义样式 点击按钮和输入框都可以打开文件夹
win10 google input type="file"在各个浏览器下的默认样式,以及修改自定义样式 点击按钮和输入框都可以打开文件夹
win10 firefox input type="file"在各个浏览器下的默认样式,以及修改自定义样式 点击按钮和输入框都可以打开文件夹
win10 edge input type="file"在各个浏览器下的默认样式,以及修改自定义样式 点击按钮和输入框都可以打开文件夹
win10 ie11 input type="file"在各个浏览器下的默认样式,以及修改自定义样式 点击按钮和输入框都可以打开文件夹
win10 ie11仿真ie10\9\8\7\5 input type="file"在各个浏览器下的默认样式,以及修改自定义样式 点击按钮可以打开文件夹,输入框不可以打开文件夹

二、修改成自己的样式

目标样式如下:

上传头像

当上传文件后,会在右侧显示文件名

input type="file"在各个浏览器下的默认样式,以及修改自定义样式

点击,在新窗口打开演示版:www.jusctice.cn/u1 (基础演示用,没有做更多判断容错处理,所以别传太大的文件)

具体代码:

-- css --

        .inputFileWrapper label{
display: block;
float: left;
position: relative;
}
.inputFileWrapper input[type="file"]{
position: absolute;
width: 1px;
height: 1px;
clip:rect(0,0,0,0);
}
.inputFileWrapper .custorm-style{
display: block;
width: 390px;
height: 50px;
}
.inputFileWrapper .custorm-style .left-button{
width: 80px;
line-height: 50px;
background: #008ac7;
color: #fff;
display: block;
text-align: center;
float: left;
}
.inputFileWrapper .custorm-style .right-text{
width: 300px;
height: 40px;
line-height: 50px;
display: block;
float: right;
padding: 4px;
border: 1px solid #008ac7;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}

--html--

 <div class="inputFileWrapper">
<label for="inputFile">
<input type="file" id="inputFile"/>
<span class="custorm-style">
<span class="left-button">上传头像</span>
<span class="right-text" id="rightText"></span>
</span>
</label>
</div>

--js--

 <script src="js/jquery-1.11.2-min.js"></script>
<script>
var fileBtn = $("input[type=file]");
fileBtn.on("change", function(){
var index = $(this).val().lastIndexOf("\\");
var sFileName = $(this).val().substr((index+1));
$("#rightText").html(sFileName);
});
</script>