Input file 文件选择框美化 支持Firefox

闲来无事写了一个.也许用得上

在FF2,IE7,IE6下测试通过

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="wuleying" />
  6. <!--<script type="text/javascript" src="ajax.js"></script>-->
  7. <title>测试上传文件</title>
  8. <style type="text/css">
  9. * {font-size:12px;margin:0;}
  10. body {background:#fff;}
  11. form {margin:12px;}
  12. input.file{
  13.     vertical-align:middle;
  14.     position:relative;
  15.     left:68px;
  16.     *left:-218px;
  17.     filter:alpha(opacity=0);
  18.     opacity:0;
  19.     z-index:1;
  20.     *width:223px;
  21.     display:none;
  22. }
  23. form input.viewfile {
  24.     z-index:99;
  25.     border:1px solid #ccc;
  26.     padding:2px;
  27.     width:150px;
  28.     vertical-align:middle;
  29.     color:#999;
  30. }
  31. form p span {
  32.     float:left;
  33. }
  34. form label.bottom {
  35.     border:1px solid #38597a;
  36.     background:#4e7ba9;
  37.     color:#fff;
  38.     height:19px;
  39.     line-height:19px;
  40.     display:block;
  41.     width:60px;
  42.     text-align:center;
  43.     cursor:pointer;
  44.     float:left;
  45.     position:relative;
  46.     *top:1px;
  47. }
  48. form input.submit {
  49.     border:0;
  50.     background:#380;
  51.     width:70px;
  52.     height:22px;
  53.     line-height:22px;
  54.     color:#fff;
  55.     cursor:pointer;
  56. }
  57. p.clear {
  58.     clear:left;
  59.     margin-top:12px;
  60. }
  61. p.filep {
  62.     height:25px;
  63. }
  64. p.clear input {
  65.     float:left;
  66.     margin-right:6px;
  67. }
  68. #error {
  69.     padding-top:5px;
  70.     color:#f00;
  71. }
  72. </style>
  73. </head>
  74. <body>
  75. <form action="" onsubmit="return send();" method="post" name="upfiles" enctype="multipart/form-data"><br />
  76. <input type="hidden" name="max_file_size" value="2097152" />
  77. <input type="hidden" name="do" value="upload" />
  78. <p class="filep">
  79.     <span>
  80.         <label for="viewfile">上传文件：</label>
  81.         <input type="text" onmouseout="document.getElementById('upload').style.display='none';" name="viewfile" id="viewfile" class="viewfile" />
  82.     </span>
  83.     <label for="upload" class="bottom" onmouseover="document.getElementById('upload').style.display='block';">查找文件</label><input type="file" id="upload" size="27" name="upload[]" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" />
  84. </p>
  85. <p class="clear"><input class="submit" type="submit" value="确定上传" /><div id="error"></div></p>
  86. </form>
  87. </body>
  88. </html>

NOTE：本博内容大部分为原创，转载请注明出处。
永久链接：http://www.zdyi.com/index.php/input-file-beautification/87.html

银子曰：有事早奏！无事退朝！

发表评论

浏览最多的10篇日志

评论最多的10篇日志

随机显示的10篇日志