修改UpFileload的样式

来源:互联网 发布:mac上的wifi共享软件 编辑:程序博客网 时间:2024/06/08 15:41
思路:使用div建立两层 ,UpFileload或是Input(File)在上一层,开alpha滤镜为透明。
下一层为输入框与按钮组合模仿UpFileload样式,UpFileload的propertychange事件给输入框赋值。
需要修改UpFileload只需要求改下一层的输入框和按钮的样式即可
<style title="text/css" type="text/css">  DIV.fileinputs { POSITION: relative }  DIV.fakefile { Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px }  INPUT.file { Z-INDEX: 2; FILTER: alpha(opacity: 0); POSITION: relative; TEXT-ALIGN: right; moz-opacity: 0; opacity: 0 }  </style>  <script language="JavaScript" type="text/javascript">    function HandleFileButtonClick()    {        document.Form1.txtFakeText.value = document.Form1.myFile.value;    }  </script>
<div class="fileinputs">    <input type="file" id="myFile" class="file" runat="server" NAME="myFile" onpropertychange="HandleFileButtonClick();"/>    <div class="fakefile">    <input type="text" name="txtFakeText"/>    <img src="search.gif"/>    </div>   </div> (text)+Button
<style title="text/css" type="text/css">DIV.fileinputs { POSITION: relative }DIV.fakefile { Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px }INPUT.file { Z-INDEX: 2; FILTER: alpha(opacity: 0); POSITION: relative; TEXT-ALIGN: right; moz-opacity: 0; opacity: 0 }</style><script language="JavaScript" type="text/javascript">    function HandleFileButtonClick()    {        document.Form1.txtFakeText.value = document.Form1.myFile.value;    }</script><div class="fileinputs"><input type="file" id="myFile" class="file" runat="server" NAME="myFile" onpropertychange="HandleFileButtonClick();"/><div class="fakefile"><input type="text" name="txtFakeText"/><img src="search.gif"/></div></div> 

 

 

原创粉丝点击