After customizing the input [type = file], I successfully transformed it into a button with a vibrant green background. Here is the code snippet that enabled this transformation:
<style>
#file {
height:0px;
opacity:0;
}
#span {
left:0px;
position:absolute;
cursor: pointer;
}
</style>
<form name="form">
<input type="file" id="file" name="file"/>
<span id="span" style="background-color: #7FFFD4">Select a file</span>
</form>
<script>
var span = document.getElementById("span");
span.onclick = function(event) {
document.form.file.click(event);
};
</script>
However, after selecting a file using this modified button, I am encountering an issue where I cannot view the selected file. Is there a method to display the selected file next to the button?
Any assistance on this matter would be greatly appreciated.