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

Question

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

我尝试了以下内容：

<!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>

出于某种原因，它不会打球。

Answer 1

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

您使用的浏览器/版本是什么？

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

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

IE7 +

完美无缺。

火狐

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

Chrome和Safari _{^{（相同行为）}}

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

戏

完美无缺。

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

Answer 2

仅因为默认按钮，

cursor:pointer对输入文件无效。这里没有特别的理由。您需要通过此代码删除其外观，请注意font-size:0。

＆＃13;

input[type='file']{
    opacity: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    font-size: 0;
    position: absolute;
}

＆＃13;

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

＆＃13;

它在Chrome，Firefox和IE上运行良好。

Answer 3

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

问题是按钮不会继承一般(?)中的游标属性，而是输入[type = file]字段的其余部分。这就是为什么chrome除了按钮

之外还有指针

Answer 4

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

/* 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;
}

似乎没问题： - ）

Answer 5

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

简单方法以及所有浏览器的工作原理：

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

Answer 6

我做了以下事情：

<li>file<input id="file_inp" type="file" /></li>

for li：

li { /*...*/ position:relative; overflow:hidden; /*...*/ }

输入：

input#file_inp { 
    /*...*/ 
    position: absolute; 
    width: 400px; 
    left: -200px; 
    top:0; 
    cursor: pointer; 
    /*...*/ 
}

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

这适合我。

Answer 7

如果您正在尝试使用Ajax上传器，您可以尝试使用兼容浏览器的其他技术，例如FireFox和Chrome。它们支持在完全不可见的文件输入上触发单击事件。除了将其display属性设置为none之外，您可以以任何方式隐藏文件输入。设置{height：0;父表单上的overflow：hidden}可以解决问题。我为每个上传者使用单独的表单。

将自定义按钮点击事件重定向到隐藏文件输入，您就完成了。

要使用此技术，您必须对Gecko或WebKit引擎执行navigator.userAgent检查。对于其他引擎，您必须使用旧的透明文件输入法。

Answer 8

首先，您的代码适用于Internet Explorer，但不适用于Firefox。

其次，W3C Css标准不允许像<input />这样的复杂标签样式。即使是游标属性。

Endly，见this page。我没有尝试他的解决方案，所以告诉我们它是否有效以及如何。

Answer 9

Chrome也给了我这个问题。我尝试设置各种CSS选择器，但似乎没有什么效果好。但是，我确实通过使用FORM元素找到了解决方案。

命名输入[type = file]元素。
命名您的表单元素并将输入[type = file]放入其中。
制作一个跨度并将其放在表单中的输入下方。这将是您的标签。
使用CSS将输入的高度设置为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中对此进行了测试，但并非如此，但我希望这会有所帮助。 jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

Answer 10

我发现还有另一种方法可以实现。在Opera New，FF，Chrome和Safari中完美运行。不幸的是，它在IE中并不完美（但对我的情况来说还不错）。

我们的想法是用固定大小的div和隐藏的溢出来包装input=file元素并设置cursor: pointer;。比我们使用左边填充移动div外部的按钮。

<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;
}

您可以在此处找到实时示例：http://jsfiddle.net/5c5RH/2/

Answer 11

尝试使用：

input[type=file] {
  cursor: pointer; cursor: hand;
}

看看是否有效。我必须把指针+手放在我的手中才能使它在FF / Chrome /等中运行。另外，我不确定它是否重要，但我认为css中的'file'周围没有引号。

Answer 12

            <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，它的效果很好。

Answer 13

基于https://stackoverflow.com/a/3030174/2325676 - 使用不透明度0隐藏输入。

让光标在整个区域上工作的关键是将font-size设置为大于按钮高度的值，以便将文件输入按钮推到可见区域下方，鼠标悬停为在文件输入的文本部分：

<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>

Answer 14

我是怎么做到的：

    /* 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 - ＆gt;我转发可见链接的点击（包括所有样式和铃声和口哨），我实际上点击了文件输入。：）

希望这有助于某人。

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

14 个答案:

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

IE7 +

火狐

Chrome和Safari _{^{（相同行为）}}

戏

简单方法以及所有浏览器的工作原理：

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

14 个答案:

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

IE7 +

火狐

Chrome和Safari （相同行为）

戏

简单方法以及所有浏览器的工作原理：

Chrome和Safari _{^{（相同行为）}}