gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:26:09 25 4
gpt4 key购买 nike

我正在构建一个需要文件上传的 html 表单。虽然我的文件上传部分正常工作,但我无法获得表单上传按钮的样式和“未选择文件”文本。

我想要的标记是

enter image description here

有办法吗?

PS:请忽略绿色文字(“上传屏幕截图”)。我有那个工作。

按钮和“未选择文件”的当前行为在同一行。

HTML代码:

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

最佳答案

不能单独使用 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
}

关于css - HTML文件上传 "no file selected"文字样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27608288/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com