Change cursor type on input type=“file” [duplicate-第2页回答

This question already has an answer here:

Styling an input type=“file” button 39 answers

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

15条回答

唯我独甜

2楼-- · 2019-01-03 06:20

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>

0人赞添加讨论(0) 举报

狗以群分

3楼-- · 2019-01-03 06:21

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.

0人赞添加讨论(0) 举报

Anthone

4楼-- · 2019-01-03 06:25

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.

0人赞添加讨论(0) 举报

beautiful°

5楼-- · 2019-01-03 06:27

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

0人赞添加讨论(0) 举报

Lonely孤独者°

6楼-- · 2019-01-03 06:30

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

0人赞添加讨论(0) 举报

聊天终结者

7楼-- · 2019-01-03 06:32

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/

0人赞添加讨论(0) 举报

Change cursor type on input type=“file” [duplicate

SIMPLE WAY AND HOW IT WORKS IN ALL BROWSERS:

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间