Question

我正在尝试创建一个需要多张图片的上传表单。我希望能够删除 ＆＃34;选择文件＆＃34; 按钮，但保留 ＆＃34;否选择文件＆＃34; 以通知用户他们将要上传哪些文件。

据我所知，我可以在输入类型文件样式上将不透明度设置为0，但这会同时删除＆＃34;选择文件＆＃34; 和＆＃34;否选择文件＆＃34; 文字。

Here is the codepen of the image uploader so far.

总结：

我想删除选择文件按钮
保留无文件选择文字。

这是HTML：

<div class="upload">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Would you like to <span style='color: lightgreen;'>Upload</span> or <span style='color: orangered;'>Delete</span> a file?</h1>
                <div style="position: relative; height: 275px;">
                    <form action="" method="post" enctype="multipart/form-data" class="formUp">

                        <input type="file" name="fileToUpload[]" id="fileToUpload" accept="image/*" multiple="multiple"><p>Click here to upload images.</p></input>
                        <input type="submit" value="Upload Images" name="submitUpload" />
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

这是CSS：

.up {
    border: none;
}

.upload {
    padding-top: 6%;
}

.upload input[type='file'] {
    outline: none;

    width: 100%;
    height: 100%;
    position: absolute;
}

.formUp {
    border: 4px dashed black;
    width: 400px;
    height: 200px;
    position: absolute;
}

.formUp p {
    text-align: center;
    width: 100%;
    height: 100%;
    line-height: 170px;
    font-weight: bold;
    font-size: 1.5em;
}

.upload input[type='submit'] {
    margin-top: 2%;
    width: 100%;
    height: 20%;
}

.upload input[type='submit'] {
  background: #0AC986;
  dispaly: inline-block;
  width: 100%;
  font-size: 16px;
  height: 50px;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

.upload input[type='submit']:hover {
    color: #F37272; 
    background-color: palegreen;
}

.upload input[type='submit'] {
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
}

.upload input[type='submit']:hover {
    color: red;
}

Answer 1

AFAIK，我们对样式输入文件做不了多少事。我们可以做的是使用不透明度和外观技巧并使输入文件覆盖父元素，因此用户仍然会收到输入文件的click事件。

此外，您还需要使用javascript / jQuery来处理您需要的内容。如果使用javascript / jQuery对你来说不是问题，请在你的[Codepen] [1]的示例实现之下。

[1]: http://codepen.io/mahdaen/pen/Ejwodb

Answer 2

text-indent属性将操纵选择文件按钮的位置，但保留无文件选择文本。


    .upload input[type='file']
    {
        text-indent: -999em;
        outline: none;
        width: 100%;
        height: 100%;
        position: absolute;
    }

删除输入文件按钮并设置所选文件的样式

2 个答案: