更改输入类型= “file”上的游标类型

问题描述

简单的问题… 如何在文件输入类型上更改光标类型？

我尝试过以下操作：

<!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 做了一个解决方案：http://jsfiddle.net/gKVKm/36/

看看 here 看看发生了什么：

它适用于 Opera，Safari，IE，Chrome 和 Firefox 。

次佳解决方案

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

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

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

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

IE7 +

工作完美

FireFox

问题是固定的，所以现在它的工作完美。有关此问题，请参阅 bug report 。在版本 3.5 中，它根本没有工作。

Chrome 和 Safari(相同的行为)

使用箭头按钮，但您定义的光标在其余部分。

Opera

工作完美

请注意，有几种解决方法使用不同的技术来解决这个问题。 answer by BjarkeCK 是我喜欢的一个优雅的解决方案，它适用于所有主流浏览器。

第三种解决方案

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=" />

它可以在 Chrome，Firefox 和 IE 上工作。

第四种方案

如果你想强制光标为了把它放在一个图像上，这里是一个

简单的方式，它在所有浏览器中如何工作：

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(不是无效的 Flash，javascript，额外的 DOM 操作与溢出隐藏)

firefox 已经修复了这个 bug
safari(此时为 7)， chrome 不具有相同的行为
safari(7，mac)dosen’t 为我工作
chrome(也可能是 Opera 当它的 webkit) 可以使用:: webkit-file-upload 按钮 pseudo-class

。

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer; 
}

问题是按钮’s doesn’t 继承了一般 (?)的游标属性，但其余的输入 [type = file] 字段的剂量。这就是为什么 chrome 得到指针，除了按钮

第六种方案

我今天遇见了这个问题：

/* 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#file_inp { 
    /*...*/ 
    position: absolute; 
    width: 400px; 
    left: -200px; 
    top:0; 
    cursor: pointer; 
    /*...*/ 
}

如前所述，光标在整个输入上变为”pointer”，不包括按钮。在大多数浏览器中，按钮位于左侧或右侧。好！让输入一个巨大的宽度，只显示中间… 按钮将被隐藏。可点击是整个输入。

这对我行得通。

参考文献

Change cursor type on input type=“file” [duplicate]

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

更改输入类型= “file” 上的游标类型