cursor:pointer 属性不适用于 Webkit 浏览器中的文件上传按钮

Posted 2023-03-04

【中文标题】cursor:pointer 属性不适用于 Webkit 浏览器中的文件上传按钮

【英文标题】：The cursor:pointer property doesn't apply to file upload buttons in Webkit browsers

【发布时间】：2011-11-25 04:08:37

【问题描述】：

我的 CSS 代码在 safari 和 chrome 等 webkit 浏览器上无法正常工作

如果你想要现场例子，这里是http://jsfiddle.net/mnjKX/1/

我有这个 CSS 代码

.file-wrapper 
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;

.file-wrapper input 
    cursor: pointer;
    font-size: 100px;
    height: 100%;
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    position: absolute;
    right: 0;
    top: 0;

.file-wrapper .button 
    background: #79130e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    margin-right: 5px;
    padding: 4px 18px;
    text-transform: uppercase;

还有这个 html 代码：

<span class="file-wrapper">
   <input type="file" name="photo" id="photo" />
   <span class="button">Choose a Photo</span>
</span>

此代码显示隐藏的输入文件标签， 这里的问题是 cursor:pointer 在 webkit 浏览器上不起作用，

我怎样才能解决它或绕过/超越它？

【问题讨论】：

cursor:pointer 在这里工作正常。

@Quentin：不适合我。我查看了 Chrome 14 上的小提琴，没​​有任何地方显示指针光标。

Chrome 似乎没有将cursor:pointer 规则应用于<input type="file"> 元素：jsfiddle.net/mnjKX/8

@Šime Vidas — 确实如此，但默认值不是inherit，因此您必须明确设置输入指针的样式……但它仅适用于文本字段部分而不是按钮部分。

我猜我的 Chrome 版本已经损坏。

【参考方案1】：

首先，如果您从 input 规则中删除 height 声明，它可以在 Chrome 中使用。

现场演示： http://jsfiddle.net/mnjKX/16/

但是这个透明的输入字段是一个非常糟糕的黑客......我不会依赖它。

---

更新：

这是正确的解决方案：

::-webkit-file-upload-button  cursor:pointer; 

我认为文件上传按钮无法访问，但 Chrome 的用户代理样式表证明我错了:)

【讨论】：

@Mor 这太老套了。我不认为我的答案是一个完整的解决方案。

很好，你也可以用-webkit-rtl-ordering:left; 反转按钮；

您在其他浏览器中无法访问该按钮。因此，适当的解决方案实际上是不够适当的。尽管为骇人听闻的解决方案+1。这可能是最好的黑客了。

@user732456 这个问题专门针对 Webkit 浏览器。我没有为其他浏览器寻找解决方案。其他浏览器可能存在类似的解决方案。

酷 ::-webkit-file-upload-button cursor:pointer; 解决了我的问题

【参考方案2】：

我想出了一个有趣的（跨浏览器）解决方案：

为输入提供 cursor:pointer 的 CSS 属性，将输入放置在 div 中（带有溢出：隐藏），并为输入提供 100% 的左填充。填充区域将具有指针属性。

我个人不信任 -webkit 和 -moz 修复，因为我觉得它们是任意的和临时的，并且很快就会被替换。

【讨论】：

非常好的解决方案。我碰巧将我的输入包装成自己的形式，所以这就像一个魅力，不需要额外的 div :)

聪明。我总是对这种无缘无故突然改变的细微差别感到超级偏执

【参考方案3】：

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

cursor:pointer 在输入文件上不起作用，只是因为默认按钮。这里没有什么特别的原因。您需要通过此代码删除它的外观，注意字体大小：0。

对我来说，它可以在 Chrome、Firefox 和 IE 上完美运行。希望对你也有帮助。