造型 [重复]

小编典典

造型 [重复]

css

我正在尝试样式

<input type="file">

但是我没有很多运气。我想使文本框消失，只保留按钮。我该怎么做？

阅读 260

2020-05-16

共1个答案

小编典典

CSS方式（可在此处找到基本代码）：

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

2020-05-16