更改输入类型="文件"上的光标类型

Tis*_*sch 75 html css input

简单问题...如何更改文件输入类型的光标类型?

我尝试过以下方法:

<!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>
Run Code Online (Sandbox Code Playgroud)

出于某种原因,它不会打球.

awe*_*awe 40

它在不同浏览器中的工作方式不 我想这是因为文件输入类型非常特殊.

你使用什么浏览器/版本?

我知道IE6不支持在样式中指定类型.

它在不同浏览器中的工作原理

IE7 +

完美的工作.

火狐

问题是固定的,所以现在它完美地运作.请参阅有关此问题的错误报告.
在3.5版本中它根本不起作用.

Chrome和Safari (相同的行为)

在按钮上方使用箭头,但在其余部分上使用定义的光标.

歌剧

完美的工作.


请注意,有几种解决方法会使用不同的技术来解决此问题.BjarkeCK答案是我喜欢的一个优雅的解决方案,它适用于所有主流浏览器.


End*_*ess 37

知道这是一个旧线程.但谷歌的结果带来了这个......我刚刚找到了一个部分解决方案的铬(不是invalving 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; 
}
Run Code Online (Sandbox Code Playgroud)

问题是按钮一般不会继承游标属性(?),而是输入[type = file]字段的其余部分.这就是为什么chrome除了按钮之外还有指针

  • 这应该标记为正确的答案.没有黑客,完成工作. (5认同)
  • 这有效100% (2认同)

Lew*_*wis 37

cursor:pointer仅因为默认按钮而无法对输入文件起作用.这里没有特别的理由.您需要通过此代码删除其外观,注意font-size:0.

input[type='file']{
    opacity: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    font-size: 0;
    position: absolute;
}
Run Code Online (Sandbox Code Playgroud)
<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=" />
Run Code Online (Sandbox Code Playgroud)

它在Chrome,Firefox和IE上运行良好.

  • +1提示字体大小! (3认同)
  • 这实际上并不能解决问题,因为输入按钮仍然位于图像的左上方,并且悬停时光标仍会变回默认值。您可以通过使用dev工具停用不透明度样式来确认这一点。 (2认同)
  • 添加文本缩进:-100px;也可以正确隐藏按钮左上角的光标。 (2认同)

mad*_*tyn 18

我今天遇到了这个问题并且:

/* 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;
}
Run Code Online (Sandbox Code Playgroud)

好像很好:-)


Par*_*Par 10

如果 你想强制光标移动以便将它放在图像上,这里有一个

简单的方式以及它在所有浏览器中的工作原理:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />
Run Code Online (Sandbox Code Playgroud)

JQuery的:

$("#upfile1").click(function () {
     $("#file1").trigger('click');
});
Run Code Online (Sandbox Code Playgroud)

然后你可以按任意按钮上传文件,你有一个指针光标.


在Chrome和Opera中,光标只是填充的指针,如果display:block;这就是为什么对于那些浏览器你应该这样做:

<input type="file" id="file1"  name="file1" style="display:block; padding:29px 0 0 0;" />
Run Code Online (Sandbox Code Playgroud)

  • 由于这在Chrome和Opera中不起作用,您应该从标题文本中删除"所有浏览器中的工作"! (8认同)
  • 在chrome和Opera中不起作用:http://jsfiddle.net/LWHbs/1/.出于安全原因,真的不应该在任何浏览器中工作,但我们去了. (2认同)
  • @awe这是主题中最简单的方法,明显优于"FIREFOX - 根本不起作用". (2认同)

opo*_*kov 6

我做了以下:

<li>file<input id="file_inp" type="file" /></li>
Run Code Online (Sandbox Code Playgroud)

对于李:

li { /*...*/ position:relative; overflow:hidden; /*...*/ }
Run Code Online (Sandbox Code Playgroud)

输入:

input#file_inp { 
    /*...*/ 
    position: absolute; 
    width: 400px; 
    left: -200px; 
    top:0; 
    cursor: pointer; 
    /*...*/ 
}
Run Code Online (Sandbox Code Playgroud)

如前所述,光标在整个输入上变为"指针",不包括按钮.在大多数浏览器中,按钮位于左侧或右侧.好!让我们给输入一个巨大的宽度,只显示中间...按钮将被隐藏.而clickable是整个输入.

这对我行得通.


eng*_*ran 1

首先,您的代码可以在 Internet Explorer 上运行,但不能在 Firefox 上运行。

其次,W3C CSS 标准不允许设计复杂的标签,例如<input />. 即使对于光标属性也是如此。

最后,请参阅此页。我没有尝试他的解决方案,所以请告诉我们它是否有效以及如何工作。