当前位置:asp编程网>技术教程>Css3教程>  正文

如何修改file表单的样式

1970-01-01 08:00:00   来源:网络    作者:佚名   浏览量:2945   收藏

如何修改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;">&nbsp;<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>



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网