HTML文件上传＆＃34;没有选择文件＆＃34;文字样式

Question

我正在构建一个需要文件上传的html表单。当我将文件上传部分工作时，我无法获得表单上传按钮的样式和＆＃34;没有选择文件＆＃34;文本。

我想要的标记是

有办法吗？

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

当前行为按钮和＆＃34;没有选择文件＆＃34;是在同一条线上。

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
}