每个浏览器对上传文件 type="file"都有不同的显示效果,如何设置上传文件按钮让其显示效果一致呢?
这个其实很简单,只需要使用css样式即可。
1.创建一个<div>,然后在这个<div>里面创建 type="file",同时这个div里面输入要显示的文本
代码:
<div class="file-box">
<input type="file" class="file-btn"/>
上传文件
</div>
2.设置css样式
代码:
<style>
.file-box{
display: inline-block;
position: relative;
padding: 3px 5px;
overflow: hidden;
color:#fff;
background-color: #ccc;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传按钮修改样式</title>
<style>
.file-box{
display: inline-block;
position: relative;
padding: 3px 5px;
overflow: hidden;
color:#fff;
background-color: #ccc;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
</style>
</head>
<body>
<div class="file-box">
<input type="file" class="file-btn"/>
上传文件
</div>
</body>
</html>