Styling <input type="file"> [duplicate]_问答_开发者

开发者 https://www.devze.com 2023-02-01 00:17 出处：网络

This question already has answers here: Styling an input type="file" button (46 answers) Closed 7 years ago.

This question already has answers here: Styling an input type="file" button (46 answers) Closed 7 years ago.

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

I was trying to style

<input type="file">
开发者_StackOverflow中文版

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

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>

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:

File Style Plugin for jQuery

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:

A Cheaky Way to Style an input type=”file”

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

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!

<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">

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