Html 更改 input type="file" 上的光标类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1537223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change cursor type on input type="file"
提问by Tisch
Simple question... How do I change the cursor type on a file input type?
简单的问题...如何更改文件输入类型上的光标类型？
I've tried the following:
我尝试了以下方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
input[type="file"] {
cursor: pointer;
}
</style>
</head>
<body>
<input type="file">
</body>
</html>
For some reason, it won't play ball.
出于某种原因，它不会打球。
回答by Endless
Know this a old thread. But the google results brings this up... I Just found a partial solution to chrome (not invalving flash, javascript, extra DOM manipulation with overflow hidden)
知道这是一个旧线程。但谷歌结果提出了这一点......我刚刚找到了 chrome 的部分解决方案（不是 invalving flash、javascript、额外的 DOM 操作并隐藏溢出）
- firefox has fixed this bug
- safari (7 at this moment) and chrome dosen't have identical behavior
- safari (7, mac) dosen't work at all for me
- chrome (and maybe opera now when it's webkit) can use ::webkit-file-upload-button pseudo-class
- firefox 已修复此错误
- safari（此时为 7）和 chrome 没有相同的行为
- safari (7, mac) 根本不适合我
- chrome（也许现在是 webkit 时的 opera）可以使用 ::webkit-file-upload-button 伪类
.
.
input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
cursor: pointer;
}
The problem is that button's doesn't inherit the cursor property in general(?)but the rest of the input[type=file] field dose. Thats why chrome get the pointer except the button
问题是按钮通常不继承光标属性（？），但输入 [type=file] 字段的其余部分。这就是为什么 chrome 获取除按钮之外的指针
回答by awe
It works differently in different browsers. I guess it's because the file input type is quite special.
它在不同浏览器中的工作方式不同。我猜是因为文件输入类型比较特殊。
What browser/version do you use?
你使用什么浏览器/版本？
I know that IE6 does not support to specify the type in the style.
我知道IE6不支持在样式中指定类型。
How it works in the different browsers
它如何在不同的浏览器中工作
IE7+
IE7+
Works perfectly.
完美运行。
FireFox
火狐
Issue is fixed, so now it works perfectly. See bug reporton this issue.
In version 3.5 it did not work at all.
问题已解决，因此现在可以完美运行。请参阅有关此问题的错误报告。
在 3.5 版本中它根本不起作用。
Chrome and Safari (identical behavior)
Chrome 和 Safari （行为相同）
Uses arrow over the button, but your defined cursor over the rest.
在按钮上使用箭头，但您定义的光标在其余部分上。
Opera
歌剧
Works perfectly.
完美运行。
Note that there are several workarounds using different techniques that will come around this problem. The answer by BjarkeCKis one elegant solution that I like, and it works on all major browsers.
请注意，有几种使用不同技术的变通方法可以解决此问题。BjarkeCK的答案是我喜欢的一种优雅的解决方案，它适用于所有主要浏览器。
回答by Lewis
cursor:pointerdoes not work on input file just because of the default button. No special reason here. You need to remove its appearance via this code, pay attention with font-size:0.
cursor:pointer仅因为默认按钮而对输入文件不起作用。这里没有特别的原因。您需要通过此代码删除其外观，注意font-size:0.
input[type='file']{
opacity: 0;
cursor: pointer;
width: 24px;
height: 24px;
font-size: 0;
position: absolute;
}<input type="file">
<img width="24" height="24" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADs0lEQVR42rWVa2iOYRjH9+zd+dw2oWaGwkjzRY5flDC1nBaxsTnVYkaWc8oHoZalETWHsVGkZo0yIyEmGzkWpZhDbBhmxE7v63fp/0j7YGq89e/+XfdzuJ7/dV/3/Tp+//nndHdD2o4RIQHBnilgIPL3+XytjuO0MkZ4O3zllevve3uUYMaulDxeePL0mruNXeaTmJ/IfMlfJZhekBLv+PuNBEPRq8427wN/jxPmeJxM4seoAH0yF+g9WonmVOTfK+o2weTNyZ6w2KC9fNFuQtz7AuF0+DV8Ft4GZ6OvxPXE7xlLGZ8wF4CLK39MMLNwZDoPJPPAHcJwOAiOhp/Ct+Ba3d9J/I3YEjUzTmNuNuwHd8DtcAg8FK4ica2jeuYyFKM4cyB1aGEz0BoUYw6QLWoEakLLUY25UOl+foSubaB8O1wHmWS+R+YadUojbEmi4WjYo4Rv5SCWMdic2LzYEjfBAXAynImDI78nqOXCWcIk2KsHgmB/+ARs6/BE8UDGuYw5KmkbfA5O1QckwfNJUOqWaCnDdVRuL5WsXO1oobrIXpYgJ9W6N9VKgdZRjmreUwqPReYgg7mjroMlZL5K5v2E8XA/2JKshc9okfui78QNxLaYdxgteQkcCVfCW+HX8LiuDqwFr6Ey1B/1Rm/QMJSP8lCkus4cNNheQbt032G5s4+qR8PRIhwccB1kk/kmmSsIB8GdcDVfkEbyU/B45ntZt3Ctg9icfGQ8zdwW+AY8WG36UA7m8XyZm2CxbrqkElmC2/AE+DKcCMeaC/W8nUUtWthVcJ0WtlXNMhmeS4LjXbvoolmF22ErwSh4BTzTuguFaRPadm9iXG0NAFfA1hQvtEaT4CwSHHLXYBHDLWQJ4lXnp2ifuuUYStRC2zPB6LwdYagQzdImeydNtaOFNTjoOsiSTXuot3q9BW6Bc+E62Hb7EOJQ4irGYsY5zO2E4+FmrYE5GA0vsJPWTbBMtbZWG6AyeJXgkxbTDsKXWoPBKp3tn2DY0c5vhp/BY7TIv9p0idrUNlAfnS3uUW6J3uqsaZM8OnPsQAyRfLr3g1rd2rTYdZAjB0WyGadzphHuBQfqhd+I39jX6p5OObCjIspaWQ7NQQ4OitwEm7hQRMYvfv/gx/vM2UIS7HFLtFG7tUUd1C67Udqdn63HVYpoufmuebtuR/kXlS9cu3w7H3zBTWB/laOxlqDNlABbu37VUWw9bn+lIdrBnxljbMPpno/6w7Hj/B383E4GEjzq9k+/p78fan0xNyGwEGgAAAAASUVORK5CYII=" />It works perpectly on Chrome, Firefox and IE.
它可以在 Chrome、Firefox 和 IE 上完美运行。
回答by madtyn
I met this issue today and with:
我今天遇到了这个问题：
/* Chrome/Safari and web-kit-based browsers
(if it doesn't work, try maybe also on the parent/wrapper)
*/
::-webkit-file-upload-button {
cursor:pointer;
}
/* IE11 (if it doesn't work, try maybe also on the parent/wrapper) */
input[type=file] {
cursor:pointer;
}
It seems to do fine :-)
它似乎做得很好:-)
回答by ParPar
Ifyou want to force the cursor to be hand in order to put it on an image, here is a
如果您想强制将光标置于手上以将其放在图像上，这里有一个
SIMPLE WAY AND HOW IT WORKS IN ALL BROWSERS:
简单的方法以及它在所有浏览器中的工作方式：
HTML:
HTML：
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
JQuery:
查询：
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
Then you can press on any button to upload file, and you have a pointer cursor .
然后你可以按任意按钮上传文件，你有一个指针光标。
In Chrome and Opera the cursor becomes a pointer on the padding only and if display:block;, that's why for those browsers you should do this:
在 Chrome 和 Opera 中，光标仅成为填充上的指针，如果display:block;，这就是为什么对于这些浏览器你应该这样做：
<input type="file" id="file1" name="file1" style="display:block; padding:29px 0 0 0;" />
回答by oporkov
I made the following:
我做了以下事情：
<li>file<input id="file_inp" type="file" /></li>
for li:
对于李：
li { /*...*/ position:relative; overflow:hidden; /*...*/ }
for input:
对于输入：
input#file_inp {
/*...*/
position: absolute;
width: 400px;
left: -200px;
top:0;
cursor: pointer;
/*...*/
}
As it was mentioned before, cursor becomes "pointer" on the whole input, excluding the button. In most browsers the button is on the left side or on the right side. Ok! Lets give the input a huge width and show only the middle... Button will be hidden. And clickable is the whole input.
如前所述，光标成为整个输入上的“指针”，不包括按钮。在大多数浏览器中，按钮位于左侧或右侧。好的！让我们给输入一个巨大的宽度并只显示中间...按钮将被隐藏。并且可点击是整个输入。
That works for me.
这对我行得通。
回答by Harry
If you're trying to do Ajax uploader, you might try another technique for compatible browsers such as FireFox and Chrome. They support triggering a click event on totally invisible file input. You can hide file input in any way you want except setting it's display property to none. Setting { height: 0; overflow: hidden } on parent form will do the trick. I use separate forms for each uploader.
如果您正在尝试使用 Ajax 上传器，您可以尝试另一种适用于兼容浏览器（例如 FireFox 和 Chrome）的技术。它们支持在完全不可见的文件输入上触发点击事件。除了将其显示属性设置为无之外，您可以以任何您想要的方式隐藏文件输入。设置{高度：0; 父窗体上的溢出：隐藏 } 会起作用。我为每个上传者使用单独的表格。
Redirect your custom button click event to hidden file input and you're done.
将您的自定义按钮单击事件重定向到隐藏文件输入，您就完成了。
To use this technique you must perform navigator.userAgent check for Gecko or WebKit engine. For other engines you have to use old transparent file input method.
要使用此技术，您必须对 Gecko 或 WebKit 引擎执行 navigator.userAgent 检查。对于其他引擎，您必须使用旧的透明文件输入法。
回答by pawelkmpt
I found out that there's another approach to make it. Works perfectly in Opera New, FF, Chrome and Safari. Unfortunately it doesn't work perfect in IE (but good enough for my case).
我发现还有另一种方法可以做到。在 Opera New、FF、Chrome 和 Safari 中完美运行。不幸的是，它在 IE 中并不完美（但对我来说已经足够了）。
The idea is to wrap input=fileelement with fixed size div and hidden overflow and set cursor: pointer;. Than we move button outside of the div using left padding.
这个想法是input=file用固定大小的 div 和隐藏的溢出和 set包装元素cursor: pointer;。比我们使用左填充将按钮移到 div 之外。
<div class="input-file-wrap">
<input class="file-input" type="file" />
</div>
and sample styles
和样品样式
.input-file-wrap {
background: red;
height: 33px;
width: 240px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.file-input {
width: 100%;
height: 100%;
opacity: 0;
padding-left: 240px;
margin-right: -240px;
cursor: pointer;
}
Here you can find live example: http://jsfiddle.net/5c5RH/2/
在这里你可以找到现场示例：http: //jsfiddle.net/5c5RH/2/
回答by alex
Chrome was giving me this problem too. I tried to set all sorts of CSS selectors, but nothing seemed to work well. However, I did find a solution by using the FORM element.
Chrome 也给了我这个问题。我尝试设置各种 CSS 选择器，但似乎没有任何效果。但是，我确实通过使用 FORM 元素找到了解决方案。
- name your input[type=file] element.
- name your form element and put the input[type=file] in it.
- make a span and place it below the input in the form. This will be your label.
- use CSS to set the input's height to 0px and opacity to 0, this will make it invisible.
- make the span positioned absolutely and to the left 0px.
- 命名您的 input[type=file] 元素。
- 命名您的表单元素并将 input[type=file] 放入其中。
- 制作一个跨度并将其放在表单中的输入下方。这将是你的标签。
- 使用 CSS 将输入的高度设置为 0px，将不透明度设置为 0，这将使其不可见。
- 使跨度绝对定位并位于左侧 0px。
<style> #file { height:0px; opacity:0; } #span { left:0px; position:absolute; cursor: pointer; } </style> <form name="form"> <input type="file" id="file" name="file"/> <span id="span">My File label!!!!</span> </form> <script> var span = document.getElementById("span"); span.onclick = function(event) { document.form.file.click(event); }; </script>
<style> #file { height:0px; opacity:0; } #span { left:0px; position:absolute; cursor: pointer; } </style> <form name="form"> <input type="file" id="file" name="file"/> <span id="span">My File label!!!!</span> </form> <script> var span = document.getElementById("span"); span.onclick = function(event) { document.form.file.click(event); }; </script>
I tested this in Chrome and FF, not ie, but I hope this helps. jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/
我在 Chrome 和 FF 中对此进行了测试，而不是 ie，但我希望这会有所帮助。jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/
回答by enguerran
First of all, your code works on Internet Explorer, but doesn't on Firefox.
首先，您的代码适用于 Internet Explorer，但不适用于 Firefox。
Second, W3C Css standard doesn't allow styling complex tags like <input />. Even for cursor property.
其次，W3C Css 标准不允许对像<input />. 即使对于游标属性。
Endly, see this page. I did not try his solution, so tell us if it works and how.
最后，请参阅此页面。我没有尝试他的解决方案，所以告诉我们它是否有效以及如何。
