HTML文件上传“未选择文件"；文字样式 [英] HTML file upload "no file selected" text style

问题描述

我正在构建需要文件上传的html表单.当我使文件上传部分正常工作时，我无法获得表单上传按钮和未选择文件"文本的样式.

I am building a html form that needs file upload. While I got the file upload part working, I am unable to get the styling of form upload button and " No file selected" text.

我想要的标记是

有办法吗?

PS:请忽略绿色文本(上传屏幕截图").我有工作.

PS: Please ignore the green text ( "Upload a screen shot"). I have that working.

当前行为，按钮和未选择文件"在同一行.

Current behavior the button and the "no file chosen" is in the same line.

HTML代码:

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

推荐答案

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

File inputs can't be styled with CSS alone. You'll need to use a jQuery plugin that makes a custom file upload button that can be styled with CSS.

一个好名字叫 NiceFileInput .

要使用:

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

从此处下载文件.. >

2.将其绑定到所需的元素.这会将其绑定到所有文件输入:

Download the file from here.

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

这篇关于HTML文件上传“未选择文件"；文字样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！