css - HTML文件上传 "no file selected"文字样式

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。将其绑定(bind)到您想要的元素。这将它绑定(bind)到所有文件输入:

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