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

【问题标题】：Remove input file button and style the files chosen删除输入文件按钮并设置所选文件的样式
【发布时间】：2015-06-19 17:43:13
【问题描述】：

我正在尝试创建一个包含多张图片的上传表单。我希望能够删除 “选择文件”按钮，但保留 “未选择文件”通知用户他们将要上传哪些文件。

我知道我可以将输入类型文件样式的不透明度设置为 0，但这会同时删除 “选择文件” 和 “未选择文件” 文本.

Here is the codepen of the image uploader so far.

总结一下：

我想删除“选择文件”按钮
保留 No file selected text。

这是 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;
}

【问题讨论】：

标签： html css input image-uploading

【解决方案1】：

AFAIK，我们无法对输入文件进行样式设置。我们可以做的是使用不透明度和外观技巧，使输入文件覆盖父元素，这样用户仍然会收到输入文件的点击事件。

您还需要使用 javascript/jQuery 来处理您需要的内容。如果使用 javascript/jQuery 对您来说没有问题，请在 [Codepen][1] 的示例实现下方。

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

【讨论】：

添加图片时有没有办法摆脱Click here to upload images.？ @Nanang

【解决方案2】：

text-indent 属性将控制 Choose Files 按钮的位置，但保留 No file selected 文本。

.上传输入[类型='文件'] { 文本缩进：-999em；大纲：无；宽度：100%；高度：100%；位置：绝对； }

【讨论】：