样式 css 输入文件 Firefox（也适用于 chrome）

Question

我正在开发一个无法使用 jquery 和 bootstrap 的上传页面。在 Chrome 上我使用这段代码 css 代码来解决我的问题

.btn-file-upload{

    width: 200px;

    position:relative;

    height: 40px;

}

.btn-file-upload:after{

   content:  attr(value);

   position: absolute;

   top: 0;

   left: 0;

   bottom: 0;    

   width: 99%;

   background: white;

   color: black;

   border:1px solid rgb(0, 0, 126);

   border-radius: 2px;

   text-align: center;

   font-size: 12px;

   line-height: 1.7;

   overflow: visible;

}

<input type="file" name="theFile" size="60" value="label" onkeypress="javascript:return false;" onchange="changeFileName()" class="btn-file-upload">

我怎样才能让它在 Firefox 上工作而不破坏 chrome 版本？另外，有没有办法让输入文件也可以在 Internet Explorer 上拖放？

Answer 1

好吧，经过几个小时的尝试和错误，我实际上找到了解决这个问题的真正方法首先我修改了css，没有之后.btn-file-upload{&nbsp; &nbsp;position: relative;&nbsp; &nbsp;top: 0;&nbsp; &nbsp;left: 0;&nbsp; &nbsp;bottom: 0;&nbsp; &nbsp;width: 200px;&nbsp; &nbsp;background: white;&nbsp; &nbsp;color: black;&nbsp; &nbsp;border: 1px solid rgb(0, 0, 126);&nbsp; &nbsp;border-radius: 2px;&nbsp; &nbsp;text-align: center;&nbsp; &nbsp;font-size: 12px;&nbsp; &nbsp;line-height: 1.7;&nbsp; &nbsp;overflow: visible;&nbsp; &nbsp;height: 40px;}其次，我使用按钮+输入而不是输入来设置自定义消息<button id="inputdrop" onclick="return document.getElementById('getFile').click();return false;" onkeypress="javascript:return false;"&nbsp; class="btn-file-upload">Label</button><input size='60' style='width: 187px;display:none' type='file' name="theFile" id="getFile" onchange="changeFileName()"><span id="filename" class="Testo">No file selected</span>最后我使用了一些js来进行拖放（changefilename已经可以工作了）function changeFileName(){&nbsp; &nbsp; document.getElementById("filename").innerText = code to get file name in struts;}//code here go on the onloaddocument.getElementById("inputdrop").ondragover = document.getElementById("inputdrop").ondragenter = function(evt) {&nbsp; &nbsp; evt.preventDefault();};document.getElementById("inputdrop").ondrop = function(evt) {&nbsp; document.getElementById("getFile").files = evt.dataTransfer.files;&nbsp; changeFileName();&nbsp; evt.preventDefault();};唯一的限制是，这不适用于 Internet Explorer 和旧版 Edge...但是，至少，这适用于 Chrome 和 Firefox 以及新版 Edge。