0

How could we get to show the attached filename to stack up above the "Choose File" input button clicking on which will open the file browse window. The browser (firefox and chrome) defaults to showing the filename next to the input button (see pic below).

<div class="blaa">
<a class="delete-icon" href="#"><span /></a><input name="file[0]" type="file" />
</div>

The a- class is for the delete button and trying several alignment parameters in the input tag doesn't really help as it keeps moving the input button as well.

enter image description here

crazyim5
  • 706
  • 2
  • 9
  • 26
  • Styling file inputs are incredibly tricky. You have to do some show/hide magic. http://stackoverflow.com/questions/572768/styling-an-input-type-file-button – VtoCorleone Apr 21 '14 at 23:07

1 Answers1

1

why not simulating a click on a hidden file input. mask by whatever you want for example

<div id="filenames" style="width:200px;height:200px;border:1px solid black;overflow:scroll;"></div>
<button onclick="document.getElementById('file').click ();">LoadFile</button>
<input type="file" id="file" style="display:none" onchange="var filediv=document.getElementById('filenames').appendChild (document.createElement ('p'));filediv.innerHTML=this.value;" />