HTML 文件上传“未选择文件”文本样式

Question

我正在构建一个需要文件上传的 html 表单。当我让文件上传部分工作时，我无法获得表单上传按钮和“未选择文件”文本的样式。

我想要的标记是

有办法吗？

PS：请忽略绿色文字（“上传屏幕截图”）。我有那个工作。

按钮的当前行为和“未选择文件”在同一行。

HTML 代码：

<div class="formField">
   <label for="fileToUpload">Upload a screen shot (optional) </label>
   <input type="file" name="fileToUpload" id="fileToUpload"/> 
</div>

Answer 1

文件输入不能单独使用 CSS 设置样式。您需要使用一个 jQuery 插件来制作一个可以使用 CSS 设置样式的自定义文件上传按钮。

一个好的叫NiceFileInput。

使用方法：

1。包括 jQuery（如果你还没有的话）和nicefileinput.min.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="/your_path/jquery.nicefileinput.min.js"></script>

从here下载文件。

2。将其绑定到您想要的元素。这会将其绑定到所有文件输入：

<script type="text/javascript">
$(document).ready(function() {
    $("input[type=file]").nicefileinput();
});
</script>

3。用 CSS 自定义它

.NFI-wrapper {
    // the container div
}
.NFI-button {
    // the button div element
}
.NFI-filename {
    // the text input element which collects and shows the value
}