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以查看多种类型的输入。根据您的浏览器，一些输入呈现不同。范围输入或日期输入等输入使用CSS无法编辑的操作系统级别UI。

你可以做的是隐藏文件输入并显示另一个元素，如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

所以回答你的问题是：不，不幸的是你无法设置文件输入按钮！

如何为CSS中的浏览按钮提供样式（图像）？

1 个答案: