隐藏输入类型=文件的浏览按钮

有没有办法隐藏浏览按钮，只留下可在所有浏览器中工作的文本框？隐藏输入类型=文件的浏览按钮

我已经尝试设置页边距，但他们出现在每个浏览器

来源

2011-06-16 josh

我在这里回答了类似的问题：http://stackoverflow.com/a/37183065/882337 – 2016-05-12 09:52:25

没有什么不同，你可以做的是一个（丑陋的）解决办法，但大量使用

创建一个正常的输入和图像
创建透明度0
文件输入时的图像，在用户点击，你模拟点击该文件输入
当文件输入的变化，你通过它的价值正常的输入（这样用户就可以看到路径）

在这里你可以看到一个完整的解释，并代码一起：

http://www.quirksmode.org/dom/inputfile.html

来源

2011-06-16 18:11:05 Andre

我认为，浏览器可能会禁止这种对未来的安全。 – 2013-09-20 16:36:15

我不明白为什么这代表了这种待遇，被删除。另外，如果浏览器现在禁止它，它会打破很多页面。 – Andre 2013-09-20 19:21:32

你可能只是不使隐藏的元素，简单地使它使其不透明度为0.

使输入文件隐藏将使其停止工作。所以不要这样做..

Here你可以找到一个透明浏览操作的例子;

来源

2011-10-30 23:13:28

呃，这和上面的答案一样。 – 2013-12-13 14:23:40

下面的代码非常有用隐藏默认的浏览按钮，并使用自定义的，而不是

<style type="text/css"> 
     .file-input-wrapper { 
      height: 30px; 
      margin: 2px; 
      overflow: hidden; 
      position: relative; 
      width: 118px; 
      background-color: #fff; 
      cursor: pointer; 
     } 
     .file-input-wrapper > input[type="file"] { 
      font-size: 40px; 
      position: absolute; 
      top: 0; 
      right: 0; 
      opacity: 0; 
      cursor: pointer; 
     } 
     .file-input-wrapper > .btn-file-input { 
      background-color: #494949; 
      border-radius: 4px; 
      color: #fff; 
      display: inline-block; 
      height: 34px; 
      margin: 0 0 0 -1px; 
      padding-left: 0; 
      width: 121px; 
      cursor: pointer; 
     } 
     .file-input-wrapper:hover > .btn-file-input { 
      //background-color: #494949; 
     } 
     </style> 

     <body> 
      <div class="file-input-wrapper"> 
       <button class="btn-file-input">SELECT FILES</button> 
       <input type="file" name="image" id="image" value="" />  
      </div> 
      <span id="img_text" style="float: right; 
      margin-right: -80px; 
      margin-top: -14px;"></span> 
    </body> 

     <script> 
      (function($){  
       $('input[type="file"]').bind('change',function(){   
        $("#img_text").html($('input[type="file"]').val()); 
       }); 
      })(jQuery) 
     </script>

来源

2014-07-22 10:22:25 vasudev

发现这段代码非常有用。完全准备好使用.. – naiveDeveloper 2015-07-10 04:57:31

 .dropZoneOverlay, .FileUpload { 
 
      width: 283px; 
 
      height: 71px; 
 
     } 
 

 
     .dropZoneOverlay { 
 
      border: dotted 1px; 
 
      font-family: cursive; 
 
      color: #7066fb; 
 
      position: absolute; 
 
      top: 0px; 
 
      text-align: center; 
 
     } 
 

 
     .FileUpload { 
 
      opacity: 0; 
 
      position: relative; 
 
      z-index: 1; 
 
     }

 <div class="dropZoneContainer"> 
 
      <input type="file" id="drop_zone" class="FileUpload" accept=".jpg,.png,.gif" onchange="handleFileSelect(this) " /> 
 
      <div class="dropZoneOverlay">Drag and drop your image <br />or<br />Click to add</div> 
 
     </div>

我找到Remove browse button from input=file实现这一目标的一个好方法。

该解决方案背后的基本原理是它创建了一个透明的input = file控件，并在文件控件下创建了一个对用户可见的图层。输入=文件的z索引将高于图层。

由此看来，图层是文件控制本身。但实际上，当你点击它时，输入=文件是被点击的，并且将出现选择文件的对话框。

来源

2015-07-14 02:32:20 PixelsTech

Tech这是最好的方法。我想最少的复杂性和最少的努力。 – 2017-01-19 09:11:24

这里提供了一个避免使用过多JavaScript的额外提示：如果您添加标签并将其样式设置为您想要的“浏览按钮”，则可以将其放在浏览器提供的真实浏览按钮上，或隐藏按钮不同。通过单击标签，浏览器的行为是打开对话框以浏览文件（不要忘记在标签上添加“for”属性，并使用文件输入字段的id值来实现此目的）。这样你就可以以任何你想要的方式自定义按钮。

在某些情况下，可能需要添加第二个输入字段或文本元素以显示文件输入的值并完全隐藏输入，如其他答案中所述。标签仍然可以避免模拟JavaScript中对文本输入按钮的点击。

BTW类似的黑客可用于定制复选框或单选按钮。通过为它们添加标签，单击标签会导致选择复选框/单选按钮。原生复选框/单选按钮然后可以被隐藏，并被自定义元素替换。

来源

2016-06-30 05:31:53 gwildu

奇怪的是，这适用于我（当我放置在一个按钮标签内）。

.button { 
    position: relative; 

    input[type=file] { 
      color: transparent; 
      background-color: transparent; 
      position: absolute; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      top: 0; 
      opacity: 0; 
      z-index: 100; 
     } 
}

只在Chrome（macOS Sierra）中测试过。

来源

2017-05-31 07:45:38 Tamizaan

所以我发现了这个解决方案，这是非常容易实现，给人一种非常干净的GUI

把这个在你的HTML

<label class="att-each"><input type="file"></label>

，这在你的CSS

label.att-each { 
width: 68px; 
height: 68px; 
background: url("add-file.png") no-repeat; 
text-indent: -9999px; 
}

加-file.png可以是任何想要在网页上显示的图形。点击图形将启动默认文件浏览器。

工作实例：http://www.projectnaija.com/file-picker17.html

来源

2017-12-27 19:03:07 Eaweb

隐藏输入类型=文件的浏览按钮

回答

相关问题