HTML 文件上传“未选择文件"文字样式
我正在构建一个需要文件上传的 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>
从这里下载文件.p>
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
}
相关文章