javascript - 如何在 CSS 中为浏览按钮指定样式(图像)？

Question

如何为浏览按钮应用样式(图像)？

我需要为浏览按钮提供图像，我是按照以下方式完成的，但问题是 光标指针不起作用，所以我无法单击 IPAD 中的浏览按钮...

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

谁能帮帮我..

Answer 1

您不能使用 CSS 设置文件输入按钮的样式。这不是唯一不能设置样式的元素。其他一些输入不接受样式。看这个fiddle查看多种类型的输入。根据您的浏览器，一些输入呈现不同。范围输入或日期输入等输入使用的是操作系统级别的 UI，无法通过 CSS 进行编辑。

你可以做的是隐藏文件输入并显示另一个元素，如 div 或另一个接受样式的输入，如按钮类型输入作为你的文件输入，并触发触发点击和提交(点击输入)事件在你隐藏的实际文件上输入。

代码示例:

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);

看fiddle in action

所以你的问题的答案是:不，不幸的是你不能设置文件输入按钮的样式!