[英]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.