在输入类型=“文件”上更改光标类型 [重复]
Posted
技术标签:
【中文标题】在输入类型=“文件”上更改光标类型 [重复]【英文标题】：Change cursor type on input type="file" [duplicate] 【发布时间】：2010-12-04 23:10:45 【问题描述】：简单的问题...如何更改文件输入类型上的光标类型？
我尝试了以下方法：
<!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>
由于某种原因，它不会打球。
【问题讨论】：
这个答案有效：***.com/a/8667296/123545 This answer 适用于所有主流浏览器。 this answer 解释了如何将任何类型的自定义样式应用于文件输入，而无需使用“hacky”CSS。 接受的答案已更改以反映现代技术.file-label left:0px; position:relative; cursor: pointer; ` ` 就像 chrome 和 ie 上的魅力一样
【参考方案1】：
知道这是一个旧线程。但是谷歌结果提出了这个问题......我刚刚找到了 chrome 的部分解决方案（不包括 flash、javascript、隐藏溢出的额外 DOM 操作）
firefox 已修复此问题bug 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;
问题是按钮不继承光标属性一般(?) 但输入[类型=文件]字段的其余部分剂量。 这就是为什么chrome得到除了按钮之外的指针
【讨论】：
【参考方案2】：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 title="" 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=" />它可以在 Chrome、Firefox 和 IE 上完美运行。
【讨论】：
在发布问题时，这在 FireFox（3.5 版）中不起作用。它现在可以工作了，因为他们已经在某个时候修复了它。我不知道这改变了哪个版本。 这在 Chrome 版本 37.0.2062.94 上对我不起作用 这并没有真正解决问题，因为输入按钮仍然存在于图像的左上角，并且在悬停时光标仍然会变回默认值。您可以通过开发工具停用不透明度样式来确认这一点。 添加文本缩进：-100px;也可以正确隐藏按钮左上角的光标。 你太棒了！！！！它就像魅力一样，谢谢。特别字体大小：0PX;【参考方案3】：它在不同的浏览器中的工作方式不同。我猜是因为文件输入类型比较特殊。
您使用什么浏览器/版本？
我知道IE6不支持在样式中指定类型。
它在不同浏览器中的工作原理
IE7+
完美运行。
火狐
问题已解决，现在可以完美运行。有关此问题，请参阅 bug report。 在 3.5 版中，它根本不起作用。
Chrome 和 Safari （相同的行为）
在按钮上使用箭头，但在其余部分上使用您定义的光标。
歌剧
完美运行。
请注意，有几种使用不同技术的变通方法可以解决此问题。 answer by BjarkeCK 是我喜欢的一种优雅的解决方案，它适用于所有主流浏览器。
【讨论】：
问题不仅仅来自 [type] 行为。 @enguerran：你是对的。只有 IE6 有问题。其他问题仅与为 ´` 元素设置光标样式有关，无论将其设置在全局样式部分/文件中，还是直接在 html 标签上的样式参数中. uggg 似乎应该有一些花哨的 webkit css3 规则来覆盖 chrome 不这样做.....如果你第一次使用 css 的经验让 IE 做了一些 chrome 没有做的事情，那将是非常可悲的.... 这个答案不太对。看看我的答案***.com/a/24488438/3247703。 我已更改接受的答案，以更准确地反映目前可用的解决方案。从那以后，事情发生了很大变化。【参考方案4】：我今天遇到了这个问题：
/* 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;
看起来不错:-)
【讨论】：
【参考方案5】：如果 您想强制光标放在手上以便将其放在图像上，这是一个
简单的方式及其在所有浏览器中的工作原理：
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');
);
然后你可以按任意按钮上传文件，你有一个指针光标。
在 Chrome 和 Opera 中，光标仅成为填充上的指针，如果 display:block; ，这就是为什么对于那些浏览器你应该这样做：
<input type="file" id="file1" name="file1" style="display:block; padding:29px 0 0 0;" />
【讨论】：
在 chrome 和 Opera 中不起作用：jsfiddle.net/LWHbs/1。出于安全原因，确实不应该在任何浏览器中工作，但我们开始了。 @nix 谢谢，我会更新的。 由于这在 Chrome 和 Opera 中不起作用，您应该从标题文本中删除“WORKS IN ALL BROWSERS”！ @awe 这是本主题中最简单的方法，显然比“FIREFOX - 根本不起作用”更好。 我已经在 mac 上的 chrome 中尝试过这个，它可以在没有填充显示的情况下工作：块移动。只需使用 jQuery 和 display:none 对于 Mac v22 上的 Chrome 就足够了。如果它也适用于 Windows 中的 Chrome，您应该更新它。【参考方案6】：我做了以下：
<li>file<input id="file_inp" type="file" /></li>
为李：
li /*...*/ position:relative; overflow:hidden; /*...*/
输入：
input#file_inp
/*...*/
position: absolute;
width: 400px;
left: -200px;
top:0;
cursor: pointer;
/*...*/
如前所述，光标在整个输入中变为“指针”，不包括按钮。在大多数浏览器中，按钮位于左侧或右侧。好的！让我们给输入一个巨大的宽度，只显示中间...按钮将被隐藏。并且可点击是整个输入。
这对我有用。
【讨论】：
这与我想出的解决方案几乎相同。相反，我设置了width: 100%、height: 300% 和top: -200%。这样无论父 li 的大小，按钮都会在容器上方，整个容器仍然会被输入元素覆盖。【参考方案7】：
我发现还有另一种方法可以做到这一点。在 Opera New、FF、Chrome 和 Safari 中完美运行。不幸的是，它在 IE 中并不完美（但对我来说已经足够好了）。
这个想法是用固定大小的 div 和隐藏的溢出包装 input=file 元素并设置 cursor: pointer;。比我们使用左填充将按钮移到 div 之外。
<div class="input-file-wrap">
<input class="file-input" type="file" />
</div>
和示例样式
.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;
您可以在此处找到实时示例：http://jsfiddle.net/5c5RH/2/
【讨论】：
【参考方案8】：如果您正在尝试使用 Ajax 上传器，您可以尝试其他兼容浏览器的技术，例如 FireFox 和 Chrome。它们支持在完全不可见的文件输入上触发点击事件。除了将其显示属性设置为无之外，您可以以任何方式隐藏文件输入。设置高度：0；父表单上的溢出：隐藏 可以解决问题。我为每个上传者使用单独的表单。
将您的自定义按钮单击事件重定向到隐藏文件输入，您就完成了。
要使用此技术，您必须对 Gecko 或 WebKit 引擎执行 navigator.userAgent 检查。对于其他引擎，您必须使用旧的透明文件输入法。
【讨论】：
【参考方案9】：首先，您的代码适用于 Internet Explorer，但不适用于 Firefox。
其次，W3C Css 标准不允许设置像<input /> 这样的复杂标签样式。即使是光标属性。
最后，请参阅this page。我没有尝试他的解决方案，所以请告诉我们它是否有效以及如何。
【讨论】：
您指向的解决方案可以隐藏文件输入，以便您可以显示自己的外观，但保留文件输入控件提供的鼠标交互内容。这意味着鼠标指针仍然受到文件输入的影响，并且没有一点帮助。我还尝试了另一种方法，并在覆盖文件输入的 div 上使用了 onclick 事件。这解决了光标问题，但在 FireFox 中，fileInput.click() 方法不起作用。它实际上在 IE 中工作，但这对我们没有帮助...... 还是这样吗？我一辈子都想不出如何在input 元素上设置自定义光标：/
我发现了这个 css-tricks.com/snippets/css/… 和 wtfforms.com（“他们正在改变的时代”）【参考方案10】：
Chrome 也给了我这个问题。我尝试设置各种 CSS 选择器，但似乎没有任何效果。但是，我确实通过使用 FORM 元素找到了解决方案。
-
为您的 input[type=file] 元素命名。
为您的表单元素命名并将 input[type=file] 放入其中。
创建一个跨度并将其放在表单中的输入下方。这将是您的标签。
使用 CSS 将输入的高度设置为 0 像素，不透明度设置为 0，这将使其不可见。
使 span 绝对定位到左侧 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>
我在 Chrome 和 FF 中对此进行了测试，而不是 ie，但我希望这会有所帮助。 jsfiddlehttp://jsfiddle.net/aressler38/L5r8L/1/
【讨论】：
【参考方案11】：尝试使用：
input[type=file]
cursor: pointer; cursor: hand;
看看这是否有效。我必须将指针 + 放在我的手上才能使其在 FF/Chrome/etc 中工作。另外，我不确定这是否重要，但我认为 css 中的“文件”周围没有引号。
【讨论】：
这是不对的。cursor:hand 仅受某些浏览器支持（不包括 Firefox）。 cursor: pointer是官方标准，所有浏览器都支持。
@awe: "cursor: hand" 在 firefox 上受支持，但在 input 标签上可能不支持，它不允许在 firefox 上使用任何样式。 @Jesse O'Brien：在这里有一个 doublon 真是个奇怪的主意。关于这个神奇的指令有什么解释吗？
“文件”周围的引号是可选的。无论哪种方式都可以。问题是 Firefox 不支持在输入文件元素上设置光标。
@enguerran：我是根据 Firefox 3.5.3 版中的测试说的：我尝试在 div 标签上设置cursor:pointer，它起作用了。然后我尝试设置cursor:hand，但没有成功。
@Jesse O'Brien：这里的问题是 Firefox 根本不支持在 input[type=file] 元素上设置光标。它与使用pointer 和/或hand 无关。通过将光标设置为input[type=button]，它适用于输入按钮。是的，对于input[type=file] 以外的其他人，它与设置cursor: pointer; cursor: hand; 一起工作，但这是因为Firefox 忽略了无效的cursor: hand; 并回退到之前的设置cursor: pointer;。如果你设置 only cursor: pointer;', it also works, and if you set **only** cursor: hand;` 它不起作用。【参考方案12】：
<span class="btn btn-success fileinput-button">
<span><i class="icon-plus icon-white"></i> Select Image</span>
<input type="file" name="files[]">
</span>
css：
.btn光标：指针；
你可以在这里看到它的实际效果：http://blueimp.github.com/jQuery-File-Upload/
这不是 jquery 做的。这是http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css 文件。我刚刚抓住了我需要的东西，它在没有任何 jquery 的情况下工作得很好。
【讨论】：
给定的 html 和 css 不会产生所需的结果。 jsfiddle.net/ahF9U 他们必须添加其他东西，当我添加时： .btn * cursor:pointer 它可以工作。【参考方案13】：基于https://***.com/a/3030174/2325676 - 使用不透明度 0 隐藏输入。
使光标在整个区域上工作的关键是将font-size 设置为大于按钮高度的值，以便将文件输入按钮推到可见区域下方并且鼠标悬停在文件输入的文本部分：
<div style="display: block; width: 100px; height: 50px; overflow: hidden">
<button style="width: 110px; height: 50px; position: relative; top: -5px; left: -5px;" ><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="height:50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); font-size: 70px; position: relative; top: -50px; left: -20px; cursor:pointer" />
</div>
【讨论】：
【参考方案14】：我是怎么做到的：
/* Upoload */
#upload-profile-file
z-index: 1;
.uploadButton input[type="file"]
cursor:pointer;
position:absolute;
top:0px;
opacity:0;
#upload-profile-file:hover ~ #upload-profile-pic-btn
text-decoration:underline;
#upload-profile-pic-btn
z-index:-1;
然后在我的查看页面上：
<form id="upload-profile-pic-form">
<div class="uploadButton">
<input type="file" id="upload-profile-file" name="upload" style="width: 88px; opacity:0.0; filter:alpha(opacity=0); " onchange='upload()'/>
<a id="upload-profile-pic-btn" href="#" class="expand">Upload</a>
</div>
</form>
然后我只需通过 AJAX 将我的表单提交到服务器并在那里处理其余部分。
所以 tl;dr -> 我转发了可见链接的点击（所有样式和花里胡哨），我实际上点击了文件输入。 :)
希望这对某人有所帮助。
【讨论】：
以上是关于在输入类型=“文件”上更改光标类型 [重复]的主要内容，如果未能解决你的问题，请参考以下文章