You can hide the input by placing it into a div which is height:0px
and overwflow:hidden
. THen you add a button or an other html element which you can style as you want. In the onclick event you get the input field using javascript or jQuery and click it:
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" onclick="chooseFile();">choose file</button>
<script>
function chooseFile() {
$("#fileInput").click();
}
</script>
Now the input is hidden, but you can style the button as you want, it will always open the file input on click.
If you don't want to use jQuery replace the script tag with this script tag:
<script>
function chooseFile() {
document.getElementById("fileInput").click();
}
</script>