如何使用 CSS 和 jQuery 自定义文件输入类型框
答案:使用 CSS Opacity 和 Positioning 方法
默认情况下，不同的 Web 浏览器以不同的方式呈现 HTML <input type="file">opacity 和 position 属性与 jQuery change() 方法结合使用来创建您自己的跨浏览器一致的 HTML 自定义文件上传表单控件。
让我们看一下以下示例，以了解其基本工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用 CSS 和 jQuery 自定义文件输入字段</title>
<style>
.custom-file-input{
display: inline-block;
overflow: hidden;
position: relative;
}
.custom-file-input input[type="file"]{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('.custom-file-input input[type="file"]').change(function(e){
$(this).siblings('input[type="text"]').val(e.target.files[0].name);
});
});
</script>
</head>
<body>
<form>
<div class="custom-file-input">
<input type="file">
<input type="text">
<input type="button" value="Attach">
</div>
</form>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
- 如何在 jQuery 中触发文件选择事件
- 如何使用 jQuery 从文件输入类型中获取选定的文件名
- 如何使用 CSS 和 jQuery 创建自定义单选按钮
- 如何使用 CSS 和 jQuery 创建自定义复选框
- 如何使用 CSS 和 jQuery 创建自定义选择框
