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

Question

我正在尝试创建一个包含多张图片的上传表单。我希望能够删除 "Choose Files" 按钮，但保留 "No file chosen" 通知用户他们要上传哪些文件。

我知道我可以将输入类型文件样式的不透明度设置为 0，但这会同时删除 "Choose Files" 和 "No file chosen"文字.

Here is the codepen of the image uploader so far.

总结一下：

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

这里是 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，我们无法对输入文件进行样式设置。我们可以做的是使用不透明度和外观技巧，让输入文件覆盖父元素，这样用户仍然可以收到输入文件的点击事件。

你还需要使用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;
    }

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

Remove input file button and style the files chosen

html

css

input

image-uploading