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

2019-01-03 05:54发布

站内问答 / HTML/CSS
952 15 5

This question already has an answer here:

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

查看更多
0人赞 添加讨论(0) 举报
乱世女痞
3楼-- · 2019-01-03 06:33

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.

查看更多
0人赞 添加讨论(0) 举报
We Are One
4楼-- · 2019-01-03 06:35

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

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)