如何修改file表单的样式?客户给定一个样式,要求我将file表单的样式改成他提供的那种样式----前面是一个蓝色的边框的文本框,后面的浏览按纽改成一个给定的图片。
看到这个功能,第一个想法就是模拟,使用文本框加图片模拟file表单,因为file表单后面的按纽上的文字(浏览...)和图片是不可改的,也不可以使用css设置的。
<!--
************************************
功能:模拟file表单,设置其样式
来源:网络
整理与修改:www.aspprogram.cn
************************************
-->
<style>
input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}
</style>
<form method="post" action="11.asp" enctype="multipart/form-data">
<input id="f_file" style="border:1px solid #0000ff;"> <input type="button" onmouseover="fclick(t_file)" value="" style="background-image:url('fasong.jpg'); width:60px; height:19px;">
<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=0);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
<br><input type="submit" value="提交">
</form>
<script>
function fclick(obj){
with(obj){
style.posTop=event.srcElement.offsetTop;
var x=event.x-offsetWidth/2;
if(x<event.srcElement.offsetLeft)x=event.srcElement.offsetLeft;
if(x>event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth)x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth;
style.posLeft=x;
}
}
</script>