An ordinary input of the file type in HTML
Ordinary input of type file in webpages comes with a default style and the caption, choose file. The good news is that we can style and tweak it to what we want.
<input type="file" accept="image/png, image/jpg, image/gif, image/jpeg"/>
Styling the input
There are three steps to this:
1. Wrap the input file inside a label element
<label for="inputTag"> Select Image <input id="inputTag" type="file"/> </label>
2. Change the display of the input tag to none
input{
display: none;
}
3. Style the label element
Here, you can add more elements or icons. This is where the magic comes in.
label{
cursor: pointer;
}
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://use.fontawesome.com/3a2eaf6206.js"></script>
<title>repl.it</title>
<style>
div{
text-align:center;
padding:3%;
border:thin solid black;
}
input{
display: none;
}
label{
cursor:pointer;
}
#imageName{
color:green;
}
</style>
</head>
<body>
<div>
<label for="inputTag">
Select Image <br/>
<i class="fa fa-2x fa-camera"></i>
<input id="inputTag" type="file"/>
<br/>
<span id="imageName"></span>
</label>
</div>
<script>
let input = document.getElementById("inputTag");
let imageName = document.getElementById("imageName")
input.addEventListener("change", ()=>{
let inputImage = document.querySelector("input[type=file]").files[0];
imageName.innerText = inputImage.name;
})
</script>
</body>
</html>
如何使用 CSS 在表单中设置input file 类型的样式 How you can style the input file type in forms using CSS