效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文件上传域美化</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<form class="form-inline" method="post" enctype="multipart/form-data" action="#" >
<div class="form-group">
<input type="text" class="form-control" placeholder="请选择上传图片" readonly id="fileName">
</div>
<div class="form-group " >
<div class="form-control" style="padding: 0px">
<a href="javascript:;" class="file " style="width: 100%" >选择图片
<input type="file" onchange="document.getElementById('fileName').value=this.value" name="pic">
</a>
</div>
</div>
</form>
</div>
</body>
</html>