使用CSS3 和JavaScript 設定輸入檔案的樣式
雖然可以使用CSS3 設定預設「輸入檔案」元素的樣式,但自訂選項是有限的。要完全自訂文件輸入的外觀或使用替代元素觸發瀏覽窗口,可以使用以下方法使用HTML、CSS3 和JavaScript 來實現:
使用jQuery 自訂
<div>
#file { display: none; }
var wrapper = $('<div/>').css({height: 0, width: 0, 'overflow': 'hidden'}); var fileInput = $(':file').wrap(wrapper); fileInput.change(function() { $(this).closest('#file').text($(this).val()); }); $('#file').click(function() { fileInput.click(); }).show();
結果:
可透過 CSS 自訂的自訂檔案輸入元素並在點擊時觸發檔案瀏覽視窗。
以上是如何使用 CSS3 和 JavaScript 自訂檔輸入外觀?的詳細內容。更多資訊請關注PHP中文網其他相關文章!