上输入类型=“文件” [重复]变更光标类型(Change cursor type on input

2019-07-21 10:58发布

站内文章 / 移动开发

4 0

放荡不羁爱自由

女 | 书童

私信

这个问题已经在这里有一个答案：

造型输入类型=“文件”按钮 39分的答案

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

我已经试过如下：

<!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报告在这个问题上。
在3.5版本中，它并没有在所有的工作。

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

使用箭头移到按钮上，但你的定义光标移到休息。

歌剧

完美的作品。

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

Answer 2:

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

它的工作原理perpectly在Chrome，Firefox和IE浏览器。

Answer 3:

知道这一个旧线。但是，谷歌搜索结果带来的这件事...我只是找到了部分解决铬（不invalving flash，JavaScript中，有溢出隐藏额外的DOM操作）

火狐已经修复了这个漏洞
Safari浏览器（7在这一刻）和铬这么想的具有相同行为
Safari浏览器（7，MAC）这么想的在所有的工作对我来说
铬（也许歌剧现在，当它的WebKit）可以使用:: WebKit的文件上传按钮伪类

。

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

问题是，按钮的不继承一般光标属性（？）但输入[类型=文件]字段剂量的其余部分。这就是为什么镀铬得到的指针，除了按钮

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

然后你就可以在任何按钮按下上传文件，你有一个指针光标。

在铬和歌剧光标变成上填充的指针仅并且如果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>

锂：

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

输入：

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

由于这是前面提到的，光标变成对整个输入“指针”，但不包括按钮。在大多数浏览器的按钮在左侧或右侧。好！让我们给输入了巨大的宽度，只显示中间的...按钮将被隐藏。而点击是整个输入。

这对我行得通。

Answer 7:

如果你正在尝试做的Ajax上传，你可以尝试兼容的浏览器如Firefox和Chrome的另一种技术。它们支持触发完全不可见的文件输入一个click事件。您可以隐藏你想，除了它的显示属性设置为none任何文件输入。设定{高度：0; 溢出：隐藏}父窗体上会做的伎俩。我用不同的方式为每个上传。

重定向您的自定义按钮，点击事件隐藏文件输入，就大功告成了。

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

Answer 8:

首先，你的代码工作在Internet Explorer，但不会在Firefox。

第二，W3C CSS标准不允许造型复杂的标签，如<input /> 即使光标属性。

Endly，看到这个页面。我没有尝试自己的解决方案，所以告诉我们，如果它的工作原理，以及如何。

Answer 9:

我发现还有另一种方式来做到这一点。在Opera新建，FF，Chrome和Safari完美的作品。遗憾的是它不工作在IE完美的（但不够好我的情况）。

我们的想法是包裹input=file具有固定大小的div和隐藏的溢出，并设置元件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 10:

Chrome的给我这个问题了。我试着设置了种种CSS选择器，但似乎没有任何工作。然而，我发现，通过使用FORM元素的解决方案。

命名输入[类型=文件]元素。
命名您的表单元素，并把输入[type = file]在里面。
做一个跨度，并将其放置在表单中输入以下。这将是你的标签。
使用CSS来输入的高度为0px和不透明度设置为0，这将使其不可见。
做绝对定位到左边0像素跨度。

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

尝试使用：

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

看看是否能工程。我已经把指针+手在我让它在FF /铬/等工作。另外，我不知道，如果它的问题，但我不认为有大约在CSS“文件”行情。

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;博士 - >我中继可见链接的点击（用所有的风格和花俏），我实际点击文件输入。 :)

希望这可以帮助别人。

文章来源: Change cursor type on input type=“file” [duplicate]

标签： html css input

放荡不羁爱自由

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~