改变单调的文件上传控件样式

2012/11/10 19:30:01作者：佚名来源：网络

移动端

【实例名称】

改变单调的文件上传控件样式

【实例描述】

file控件是一个标准的HTML控件，可用来实现文件的选择和上传，但其样式过于单调，有时候用户会要求改变这种上传文件控件的样式。本例学习如何改变此控件的样式。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页-学无忧（www.xue51.com）</title>
<style type="text/css">
#myInput{border:1px solid #0000FF;}
#myBtn{width:90px;height:21px;font-size:12px;
padding-top:3px;border-left:1px solid #FFFFFF;
border-top:1px solid #FFFFFF;border-right:1px solid #666666;
border-bottom:1px solid #666666}
</style>
</head>
<body>
<input type="text" id="myInput" > 
<input type="button" id="myBtn" value="选择上传的文件">
<input type="file" id="myfile" 
onchange="myInput.value=this.value" 
style="width:0;position:absolute;left:43mm;
filter:alpha(opacity=10)"></body>
</html>

【运行效果】

改变上传文件控件的样式运行效果