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

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.

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

【Aperson】

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

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.

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

forever°为你锁心

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

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.

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

ら.Afraid

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

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.

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

Deceive 欺骗

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

I made a solution with jquery here: http://jsfiddle.net/gKVKm/36/

Take a look here to see whats going on:

It works for me in Opera, Safari, IE, Chrome and Firefox.

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

老娘就宠你

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

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.

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

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

1 2 3 下一页

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

How it works in the different browsers

IE7+

FireFox

Chrome and Safari (identical behavior)

Opera

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

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

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

Chrome and Safari _{^{(identical behavior)}}