样式< input type =" file">

样式< input type =" file">

问题描述:


可能重复:

样式输入类型=文件按钮

我试图风格

<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?

CSS方法(基本代码找到此处):

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>