您的位置：首页 > Web前端 > CSS

修改默认上传文件样式

2017-01-04 10:23 555 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>修改自定义上传按钮样式</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font:14px Verdana, Arial, Geneva, sans-serif;
color:#404040;
background:#f9f9f9;
}
.main{
width:300px;
height:60px;
position:absolute;
}
.box{
position:relative;
float:left;
}
input.uploadFile{
position:absolute;
right:0px;
top:0px;
opacity:0;
filter:alpha(opacity=0);
cursor:pointer;
width:276px;
height:36px;
overflow: hidden;
}
input.textbox{
float:left;
padding:5px;
color:#999;
height:24px;
line-height:24px;
border:1px #ccc solid;
width:200px;
margin-right:4px;
}
a.link{
float:left;
display:inline-block;
padding:4px 16px;
color:#fff;
font:14px;
cursor:pointer;
background-color:#3adade;
line-height:28px;
text-decoration:none;
}
</style>
</head>

<body>
<div class="main">
<div class="box">
<input type="text" name="copyFile"  class="textbox" />
<a href="javascript:void(0);"  class="link">浏览</a>
<input type="file" class="uploadFile" name="upload" onchange="getFile(this,'copyFile')"/>
</div>
<script type="text/javascript">
function getFile(obj,inputName){
var file_name = $(obj).val();
$("input[name='"+inputName+"']").val(file_name);
}
</script>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航