阿爾特輸入類型=「文件」標籤內容

我想知道是否有什麼辦法可以隱藏或更改默認標籤的內容：No file chosen爲阿爾特輸入類型=「文件」標籤內容

<input type="file" id="myFileInput"/>

我想出到目前爲止是減少它的長度減半，這樣它就會顯示一個工具提示。

$('input:file').css('width', parseFloat($($('input:file')).css('width'))/2);

任何想法？

來源

2012-12-03 Akhil Sekharan

使用不同的瀏覽器...（嚴重的是，我真的不會在這種程度上混淆標準表單控件的默認呈現）。 – Quentin

這裏。其中一些渲染是由於很好的理由而完成的，我們現在的網絡可用性問題中有相當一部分可以追溯到規避完美的默認行爲的人。不過，如果你需要這樣做才能工作，你可能沒有多少選擇。 – RonaldBarzell

您無法將輸入文件設計更改爲每個瀏覽器的原生設計。但你仍然可以模擬它，對不起哈克：

See DEMO

<button id="btn_myFileInput">Choose file...</button> 
<label for="btn_myFileInput">No file choosen or whatever...</label> 
<input type="file" id="myFileInput" multiple />

JS：

$(function() { 
    $('#btn_myFileInput').data('default', $('label[for=btn_myFileInput]').text()).click(function() { 
     $('#myFileInput').click() 
    }); 
    $('#myFileInput').on('change', function() { 
     var files = this.files; 
     if (!files.length) { 
      $('label[for=btn_myFileInput]').text($('#btn_myFileInput').data('default')); 
      return; 
     } 
     $('label[for=btn_myFileInput]').empty(); 
     for (var i = 0, l = files.length; i < l; i++) { 
      $('label[for=btn_myFileInput]').append(files[i].name + '\n'); 
     } 
    }); 
});

來源

2012-12-03 14:22:37

謝謝..這就是我一直在尋找的。 –

您也可以繼續以這種方式，但它是一個黑客：

<input type="file" id="myFileInput" name="html" style="width: 90px;" onchange="this.style.width = '100%';"/>

來源

2012-12-03 14:26:26

Chrome也給了我這個問題。我試圖設置各種CSS選擇器，但沒有任何效果。但是，我通過使用FORM元素找到了解決方案。

命名您的輸入[type = file]元素。
命名您的表單元素，並在其中輸入[type = file]。
作出一個跨度，並將其放在窗體中的輸入下方。這將是你的標籤。
使用CSS設置輸入的高度爲0px，不透明度爲0，這將使其不可見。
使跨度絕對定位，並在左邊0px。

<style> 
    #file { 
     height:0px; 
     opacity:0; 
    } 
    #span { 
     left:0px; 
     position:absolute; 
     cursor: pointer; 
    } 
</style> 

<form name="form"> 
    <input type="file" id="file" name="file"/> 
    <span id="span">My File label!!!!</span> 
</form> 

<script> 
    var span = document.getElementById("span"); 

    span.onclick = function(event) { 
     document.form.file.click(event); 
    }; 

    var span = document.getElementById("span"); 
    span.onclick = function(event) { 
     document.form.file.click(event); 
    }; 
</script>

我在Chrome和FF，即不進行測試，但我希望這有助於。 jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

來源

2013-10-22 02:49:23 alex

阿爾特輸入類型=「文件」標籤內容

回答

相關問題