使用CSS和HTML统一查找输入文件控件

我试图自定义浏览文件控件的外观，并将其替换为简单的“添加文件”按钮。我添加了以下标记。它适用于“div”的块级元素，我需要指定div的宽度来限制它的宽度。使用CSS和HTML统一查找输入文件控件

我试图改变div跨度。 UI看起来不错，但溢出：隐藏的东西无法正常工作使上传控件的隐藏（不透明度：0）区域可点击。

有人可以告诉我为什么是这种行为？有没有办法解决它？我宁愿将“div”替换为“a”而不是“span”。它会好吗？或点击事件会导致处理事件的任何问题？

<html> 
    <head> 
     <style> 
      .add-files{ 
       position:relative; 
       overflow:hidden; 
       width:100px; 
       text-align:center; 
       border:2px solid black; 
      } 

      .file-control{ 
       position:absolute; 
       right:0; 
       top:-4; 
       z-index:1; 
       font-size:50px; 
       opacity:0; 
       cursor:pointer; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="add-files"> 
      Add Files 
      <input type="file" multiple="true" class="file-control"> 
     </div> 
    </body> 
</html>

来源

2011-05-17 Anil Namde

您定位的任何特定浏览器？它似乎在Firefox 3.x上工作。你可以查看它[这里]（http://jsfiddle.net/dhXsX/） – 2011-05-17 14:49:58

我想你会遇到样式输入类型文件的问题，因为浏览器以不同方式处理输入类型。与常规输入不同，不同的浏览器添加不同的东西。您可能需要使用不同的方法来添加文件。

来源

2011-05-18 03:35:02 Dan

使用CSS和HTML统一查找输入文件控件

回答

相关问题