在 input type = “ 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>

出于某种原因，它不合作。

111705 次浏览
小开

First of all, your code works on Internet Explorer, but doesn't on Firefox.

Second, W3C Css standard doesn't allow styling complex tags like <input />. Even for cursor property.

Endly, see this page. I did not try his solution, so tell us if it works and how.

小开

It works differently in different browsers. I guess it's because the file input type is quite special.

What browser/version do you use?

I know that IE6 does not support to specify the type in the style.

How it works in the different browsers

IE7+

Works perfectly.

FireFox

Issue is fixed, so now it works perfectly. See bug report on this issue.
In version 3.5 it did not work at all.

Chrome and Safari (identical behavior)

Uses arrow over the button, but your defined cursor over the rest.

Opera

Works perfectly.

Note that there are several workarounds using different techniques that will come around this problem. The answer by BjarkeCK is one elegant solution that I like, and it works on all major browsers.

小开

Try using:

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

See if that works. I've had to put pointer + hand in mine to make it work in FF/Chrome/etc. Also, I'm not sure if it matters but I don't think there are quotes around 'file' in the css.

小开

If you're trying to do Ajax uploader, you might try another technique for compatible browsers such as FireFox and Chrome. They support triggering a click event on totally invisible file input. You can hide file input in any way you want except setting it's display property to none. Setting { height: 0; overflow: hidden } on parent form will do the trick. I use separate forms for each uploader.

Redirect your custom button click event to hidden file input and you're done.

To use this technique you must perform navigator.userAgent check for Gecko or WebKit engine. For other engines you have to use old transparent file input method.

小开

I made the following:

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

for li:

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

for input:

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

As it was mentioned before, cursor becomes "pointer" on the whole input, excluding the button. In most browsers the button is on the left side or on the right side. Ok! Lets give the input a huge width and show only the middle... Button will be hidden. And clickable is the whole input.

That works for me.

小开

If you want to force the cursor to be hand in order to put it on an image, here is a

SIMPLE WAY AND HOW IT WORKS IN ALL BROWSERS:

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

Then you can press on any button to upload file, and you have a pointer cursor .

In Chrome and Opera the cursor becomes a pointer on the padding only and if display:block; , that's why for those browsers you should do this:

<input type="file" id="file1"  name="file1" style="display:block; padding:29px 0 0 0;" />
小开 
            <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{cursor:pointer;}

You can see it in action here: http://blueimp.github.com/jQuery-File-Upload/

It's not the jquery doing it. It's the http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css file. I've just grabbed what I needed out of it and it works great without any of the jquery.

小开

Chrome was giving me this problem too. I tried to set all sorts of CSS selectors, but nothing seemed to work well. However, I did find a solution by using the FORM element.

  1. name your input[type=file] element.
  2. name your form element and put the input[type=file] in it.
  3. make a span and place it below the input in the form. This will be your label.
  4. use CSS to set the input's height to 0px and opacity to 0, this will make it invisible.
  5. make the span positioned absolutely and to the left 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>

I tested this in Chrome and FF, not ie, but I hope this helps. jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

小开

I found out that there's another approach to make it. Works perfectly in Opera New, FF, Chrome and Safari. Unfortunately it doesn't work perfect in IE (but good enough for my case).

The idea is to wrap input=file element with fixed size div and hidden overflow and set cursor: pointer;. Than we move button outside of the div using left padding.

<div class="input-file-wrap">
<input class="file-input" type="file" />
</div>

and sample styles

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

Here you can find live example: http://jsfiddle.net/5c5RH/2/

小开

Know this a old thread. But the google results brings this up... I Just found a partial solution to chrome (not invalving flash, javascript, extra DOM manipulation with overflow hidden)

  • firefox has fixed this bug
  • safari (7 at this moment) and chrome dosen't have identical behavior
  • safari (7, mac) dosen't work at all for me
  • chrome (and maybe opera now when it's webkit) can use ::webkit-file-upload-button pseudo-class

.

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

The problem is that button's doesn't inherit the cursor property in general(?) but the rest of the input[type=file] field dose. Thats why chrome get the pointer except the button

小开

Based on https://stackoverflow.com/a/3030174/2325676 - Hide the input using opacity 0.

The key to getting the cursor to work on the entire area is setting the font-size to a value greater than the height of the button so that the file input button is pushed below the visible area and the mouse hover is on the text part of the file input:

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

cursor:pointer does not work on input file just because of the default button. No special reason here. You need to remove its appearance via this code, pay attention with 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=" />

It works perpectly on Chrome, Firefox and IE.

小开

How I did it: 

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

And then on my view page:

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

And then I simply submit my form via AJAX to the server and handle the rest there.

So tl;dr -> I relay the click of the visible link (with all styles and bells and whistles) and I actually click the file input. :)

Hope this helps someone.

小开

I met this issue today and with:

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

It seems to do fine :-)


提交答案