Change cursor type on input type="file"

HtmlCssInput

Html Problem Overview

Simple question... How do I change the cursor type on a file input type?

I've tried the following:

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

For some reason, it won't play ball.

Html Solutions

Solution 1 - Html

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[(?)][2] but the rest of the input[type=file] field dose. Thats why chrome get the pointer except the button

[2]: https://stackoverflow.com/a/23860302/1008999 "unsure"

Solution 2 - Html

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.

Solution 3 - Html

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.

Solution 4 - Html

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

Solution 5 - Html

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

Solution 6 - Html

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.

Solution 7 - Html

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/

Solution 8 - Html

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.

Solution 9 - Html

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.

Solution 10 - Html

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.

> > >

> > My File label!!!! >
> >

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

Solution 11 - Html

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.

Solution 12 - Html

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

Solution 13 - Html

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>

Solution 14 - Html

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.

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Input Solutions

Previous Solution:

Freemarker iterating over hashmap keys

JavaFreemarker

Next Solution:

Subquery using Exists 1 or Exists *

SqlSql ServerTsql

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTischView Question on Stackoverflow
Solution 1 - HtmlEndlessView Answer on Stackoverflow
Solution 2 - HtmlLewisView Answer on Stackoverflow
Solution 3 - HtmlaweView Answer on Stackoverflow
Solution 4 - HtmlmadtynView Answer on Stackoverflow
Solution 5 - HtmlParParView Answer on Stackoverflow
Solution 6 - HtmloporkovView Answer on Stackoverflow
Solution 7 - HtmlpawelkmptView Answer on Stackoverflow
Solution 8 - HtmlHarryView Answer on Stackoverflow
Solution 9 - HtmlenguerranView Answer on Stackoverflow
Solution 10 - HtmlalexView Answer on Stackoverflow
Solution 11 - HtmlJesse O'BrienView Answer on Stackoverflow
Solution 12 - HtmlChristinaView Answer on Stackoverflow
Solution 13 - HtmlDaniel FlippanceView Answer on Stackoverflow
Solution 14 - HtmlMartinView Answer on Stackoverflow