更改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。

  1. 命名你的input[type = file]元素。
  2. 命名你的表单元素,并将其中的input[type = file]。
  3. 创build一个跨度,并将其放置在表单的input下方。 这将是你的标签。
  4. 使用CSS设置input的高度为0px,不透明度为0,这将使其不可见。
  5. 使跨度绝对定位在左侧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。 🙂

希望这有助于某人。