CSS: How make the cursor to become a pointer on the input file?

亡梦爱人 提交于 2019-12-30 07:04:30

问题


How can I make the cursor to become a pointer on an input file or an input text when you hover it?

My try but it does not work of course,

<input type="file" style="cursor: pointer;"/>

Or do I have to use javascrip (jquery)??

EDIT:

Sorry my mistake - the cursor does change to a point on

<input type="text" style="cursor: pointer;"/>

But not on

<input type="file" style="cursor: pointer;"/>

You can test this link on Firefox then you see what I mean.

Only the button of file change to the pointer but not the input field of file.

EDIT 2:

Here is my CSS 'hack',

<div id="right-col" style="position:relative; width:76px; height:24px; overflow:hidden; border:1px solid #000;">
<input type="file" style="position:absolute; top:0; right:0; z-index:2;opacity:1; cursor:pointer;"/>
</div>

回答1:


Cannot be done. The input type file is one of the most protected objects by the browsers. Some browsers allow you to do more things than others, depending on what they consider "safe".

You could use a flash button for it. In fact, there are very nice plugins written to make file uploading a nicer thing, such as Uploadify.




回答2:


You can do this ugly jQuery hack:

$('input:file').each(function(){
    var $input = $(this);
    $input.before($('<div>').height($input.height()).width($input.width()).css(
        {
            cursor: 'pointer',
            position: 'absolute',
            zIndex: $input.css('z-index')
        }).click(function(){
            $(this).hide();
            $input.click();
            $(this).show();
        }));
});

But it prevents the animation you normally see when you mousedown on a button element. JSFiddle




回答3:


Nope... that's how you do it. Compare here.




回答4:


You can put an image instead, and do it like this:

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

CAVEAT: In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.




回答5:


You can try instead of any wrapper for input type "file".

<label for="photo"><span class="button">CHOOSE A FILE</span></label>

Check this ... http://jsfiddle.net/pFK74/



来源:https://stackoverflow.com/questions/7155381/css-how-make-the-cursor-to-become-a-pointer-on-the-input-file

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!