我正在构建需要文件上传的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="ajax.googleapis/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文件上传“未选择文件";文字样式
发布评论