file 元素样式的模拟（兼容模式）

最新推荐文章于 2021-06-19 14:32:45 发布

laoxiao1987

最新推荐文章于 2021-06-19 14:32:45 发布

阅读量443

点赞数

分类专栏： javascript 文章标签： file input upload button border action

本文链接：https://blog.csdn.net/laoxiao1987/article/details/6750648

版权

javascript 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<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>

<style>

input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}

</style>

<form method="post" action="" enctype="multipart/form-data">

<input id="f_file">   <span style="position:relative">input type="button" οnmοuseοver="fclick(t_file)" value="选择上传文件">

<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);opacity:0;width:30px;" id="t_file" οnchange="f_file.value=this.value" size="9" hidefocus>
</span>
<br><input type="submit" value="提交">

</form>

html中file格式的宽度在IE下面可以用width来定义，但在firefox下面却要用size来定义其宽度