Styling <input type=“file”> [duplicate]

2019-01-04 13:30发布

站内问答 / JavaScript
975 5 6

This question already has an answer here:

Possible Duplicate:
Styling an input type=“file” button

I was trying to style 

<input type="file">

but i have not had much luck. I want to make the textbox disappear and only keep the button. How can I do it?

5条回答
Root（大扎）
2楼-- · 2019-01-04 14:15

some browsers need File input visible and click the browse button manually, or it will submit nothing to server. so i suggest Saefraz's first solution: File Style Plugin for jQuery

查看更多
0人赞 添加讨论(0) 举报
走好不送
3楼-- · 2019-01-04 14:19

I wrote this jQuery plugin to make it much simpler to style the file input. Use CSS and "fake elements" to get the results you want.

http://github.com/jstnjns/jquery-file

Hope that helps!

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
4楼-- · 2019-01-04 14:25 
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
5楼-- · 2019-01-04 14:29

There is no easy cross-browser way to style the input type of files. Therefore there exist solution that even use javascript.

Here is a jQuery plugin you can use to style file types in the cross-browser fashion:

Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

You can check out the demo here

As also posted on popular ajaxian.com, you can take a look at this too:

Shaun Inman has got a lovely little hack that allows you to style file inputs with CSS and the DOM.

These elements are notoriously painful to deal with, and now we have select boxed playing nice on IE, we need something else to fix up :)

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
6楼-- · 2019-01-04 14:31

The CSS way (base code found here):

<html>
    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

    <div class="fileinputs">
        <input type="file" class="file" />

        <div class="fakefile">
            <input type="button" value="Select file" />
        </div>
    </div>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)