如何使用 CSS3 和 JavaScript 自訂檔輸入外觀？

使用CSS3 和JavaScript 設定輸入檔案的樣式

雖然可以使用CSS3 設定預設「輸入檔案」元素的樣式，但自訂選項是有限的。要完全自訂文件輸入的外觀或使用替代元素觸發瀏覽窗口，可以使用以下方法使用HTML、CSS3 和JavaScript 來實現：

使用jQuery 自訂

1. HTML: 插入預設檔輸入和將用作自訂的div 元素按鈕。

<div>

2. CSS:隱藏預設檔輸入。

#file {
    display: none;
}

3. jQuery : 將檔案輸入包裝在具有隱藏尺寸的 div 中，以防止意外點擊。使用變更事件以選定的檔案路徑更新自訂按鈕文字。點擊自訂按鈕時觸發文件輸入點擊事件。

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中文網其他相關文章！