更改inputtypes=“文件”上的游标types
简单的问题…如何改变文件inputtypes的游标types？
我已经尝试了以下内容：
<!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> 出于某种原因，它不会打球。
我在这里用jquery做了一个解决scheme： http : //jsfiddle.net/gKVKm/36/
看看这里看看是怎么回事：
它适用于Opera，Safari，IE，Chrome和Firefox。
它在不同的浏览器中工作不同。 我想这是因为文件inputtypes是非常特殊的。
你使用什么浏览器/版本？
我知道IE6不支持在样式中指定types。
它如何在不同的浏览器中工作
IE7 +
完美的作品。
火狐
问题是固定的，所以现在它完美的工作。 查看关于这个问题的错误报告 。
在3.5版中，它根本不起作用。
Chrome和Safari （相同的行为）
使用button上方的箭头，但您定义的光标在其余的。
歌剧
完美的作品。
请注意，有几个解决方法使用不同的技术来解决这个问题。 BjarkeCK的答案是我喜欢的一个优雅的解决scheme，它适用于所有主stream浏览器。
cursor:pointer仅仅因为默认button而无法在input文件上工作。 这里没有特别的原因。 你需要通过这个代码删除它的外观，注意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=" />
知道这是一个古老的线程。 但谷歌的结果带来了这一点…我只是发现铬的部分解决scheme（不是invalving Flash，JavaScript，额外的DOM操作与溢出隐藏）
- Firefox已经修复了这个bug
- safari（此时为7）和chrome不具有相同的行为
- Safari（7，mac）根本不为我工作
- 铬（也可能是opera现在是webkit）可以使用:: 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; }
问题是，button的一般（？）不会inheritance游标属性，但其余的input[type = file]字段剂量。 这就是为什么铬得到指针除了button
如果你想强制光标为了把它放在图像上，这里是一个
简单的方法和它如何在所有浏览器中运行：
HTML：
<img src="http://img.dovov.comuploadButton.png" id="upfile1" style="cursor:pointer" /> <input type="file" id="file1" name="file1" style="display:none" />
JQuery的：
$("#upfile1").click(function () { $("#file1").trigger('click'); });
然后你可以按任何button来上传文件，并且你有一个指针光标。
在Chrome和Opera中，光标只成为填充的指针，如果display:block; ，这就是为什么对于这些浏览器，你应该这样做：
<input type="file" id="file1" name="file1" style="display:block; padding:29px 0 0 0;" />
我今天遇到这个问题，并且：
/* 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; }
它似乎做得很好:-)
我做了以下几点：
<li>file<input id="file_inp" type="file" /></li>
对于李：
li { /*...*/ position:relative; overflow:hidden; /*...*/ }
input：
input#file_inp { /*...*/ position: absolute; width: 400px; left: -200px; top:0; cursor: pointer; /*...*/ }
如前所述，光标变成整个input的“指针”，不包括button。 在大多数浏览器中，button位于左侧或右侧。 好！ 让input一个巨大的宽度，只显示中间…button将被隐藏。 可点击是整个input。
这对我行得通。
如果您正在尝试使用Ajax上传器，则可以尝试使用另一种兼容浏览器的技术，例如FireFox和Chrome。 它们支持在完全不可见的文件input中触发点击事件。 除了将display属性设置为none之外，您可以以任何方式隐藏文件input。 设置{height：0; 溢出：隐藏}在父窗体将做的伎俩。 我为每个上传者使用单独的表单。
redirect你的自定义button点击事件隐藏文件input，你就完成了。
要使用这种技术，您必须执行navigator.userAgent检查Gecko或WebKit引擎。 对于其他引擎，你必须使用旧的透明文件input法。
首先，您的代码在Internet Explorer上工作，但不在Firefox上。
其次，W3C Css标准不允许样式复杂的标签，如<input /> 。 即使对于游标属性。
最后，看到这个页面 。 我没有尝试他的解决scheme，所以告诉我们，如果它的工作和如何。
Chrome也给我这个问题。 我试图设置各种CSSselect器，但似乎没有任何工作。 但是，我通过使用FORM元素find了一个解决scheme。
- 命名你的input[type = file]元素。
- 命名你的表单元素，并将其中的input[type = file]。
- 创build一个跨度，并将其放置在表单的input下方。 这将是你的标签。
- 使用CSS设置input的高度为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>
我在Chrome和FF中testing了这个，不是，但我希望这有助于。 jsfiddle.net/aressler38/L5r8L/1/
尝试使用：
input[type=file] { cursor: pointer; cursor: hand; }
看看是否有效。 我不得不把指针+手放在我的FF / Chrome /等工作。 此外，我不知道是否重要，但我不认为在CSS文件周围引号。
<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，效果很好。
我发现还有另一种方法来实现它。 在Opera New，FF，Chrome和Safari中完美运行。 不幸的是，它不能完美的在IE浏览器（但足够我的情况）。
这个想法是包装固定大小div和隐藏溢出的input=file元素，并设置cursor: pointer; 。 比我们使用左填充移动div的外部button。
<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; }
在这里你可以find现场的例子： http : //jsfiddle.net/5c5RH/2/
基于https://stackoverflow.com/a/3030174/2325676 – 使用不透明度0隐藏input。
让光标在整个区域工作的关键是将font-size设置为大于button高度的值，以便将文件inputbutton推到可见区域下方，并将鼠标hover在文本部分文件input：
<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>
我是如何做到的：
/* 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 – >我转播点击可见链接（所有样式和花里胡哨），我实际上单击文件input。 🙂
希望这有助于某人。
