簡體   English   中英

如何為 CSS 中的瀏覽按鈕提供樣式(圖像)?

[英]How to give style (image) for browse button in CSS?

如何為瀏覽按鈕應用樣式(圖像)?

我需要為瀏覽按鈕提供圖像,我按以下方式完成,但問題是 cursor 指針不起作用,所以我無法單擊 IPAD 中的瀏覽按鈕...

input.file {
    cursor: pointer;
    border: 0 solid #33CCFF;
    opacity: 0;
    padding: 5px;
    position: relative;
    text-align: right;
    width: 350px;
    z-index: 2;
}

誰能幫我..

您不能使用 CSS 設置文件輸入按鈕的樣式。 這不是您無法設置樣式的唯一元素。 其他一些輸入不接受 styles。 查看此小提琴以查看多種類型的輸入。 根據您的瀏覽器,某些輸入呈現不同。 范圍輸入或日期輸入等輸入正在使用 CSS 無法編輯的操作系統級別 UI。

您可以做的是隱藏文件輸入並顯示另一個元素,如 div 或另一個接受樣式的輸入,如按鈕類型輸入作為文件輸入,並在隱藏的實際文件輸入上觸發觸發器單擊和提交(按 Enter)事件。

代碼示例:

HTML

<input type="file" />
<label>Select file to upload: <input type="button" /></label>

CSS

input[type="file"]{visibility:hidden; width:0;}

JavaScript:

var fileInput = document.querySelectorAll('input[type="file"]')[0],
    fakeFileInput = document.querySelectorAll('label')[0],
    clickEvent = document.createEvent('MouseEvent');
clickEvent.initMouseEvent('click',true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null);

fakeFileInput.addEventListener('click', function(event){
   fileInput.dispatchEvent(clickEvent);
}, false);

看看小提琴在行動

所以你的問題的答案是:不,你不能設計文件輸入按鈕!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM