如何在沒有瀏覽器相容性問題的情況下設定文件輸入元素的樣式？

在沒有瀏覽器相容性問題的情況下設定輸入類型檔案的樣式

自訂輸入類型檔案元素的外觀可能是跨瀏覽器相容性的惡夢。但是，只需幾個步驟，就可以完全控製文件上傳表單的外觀，而無需犧牲功能。

1. 建立隱藏檔案輸入標籤:

   建立一個 type="file" 的隱藏輸入標籤並使用 CSS 隱藏它。此標籤將充當底層文件上傳機制。

   <div>

   登入後複製

   登入後複製

2. 建立自訂按鈕：

   設計一個自訂按鈕或元素將啟動檔案選擇流程。這可以使用 CSS 和 HTML 來完成。

   <div>

   登入後複製

   登入後複製

3. 使用 JavaScript 觸發檔案輸入:

   使用 JavaScript傳遞點擊事件隱藏檔案輸入的自訂按鈕

   function getFile() {
       document.getElementById("upfile").click();
   }

   登入後複製

4. 設定自訂按鈕的樣式：

   依需求設定自訂按鈕的樣式

   ：

   #yourBtn {
       height: 50px;
       width: 100px;
       background-image: url(path/to/image);
       border: 1px solid #BBB;
       cursor: pointer;
   }

   登入後複製
依需求設定自訂鈕的樣式，刪除底層的預設外觀和感覺檔輸入

5. 處理檔案上傳（可選）

   :

以上是如何在沒有瀏覽器相容性問題的情況下設定文件輸入元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！