Styled input file button no longer shows chosen file

[volter9]

@RyanReese

The <input> needs to be changed to this

<input id="input" type="file"></input>

Both browsers behave now on my end :).

Wow, is that a hack or something? The input tag is self-closing tag, it is probably a mistake.

@ChrisjChrisj

Those Notices disappear. However, the issue remains the same in IE, which is that the “click to select file” button doesn’t do anything(that I can see), and to upload a file the Browse button, needs to be selected.

And it still looks like this - see IE-image in previous post.
Someone suggested this:
“with JavaScript or Jquery… Create an event handler that if a file is selected $(‘.selectedfile’).show(); <span class=“selectedfile”>Your File has been Chosen for Upload!</span> then once the submit button has been hit you could also swap that out for a loader gif or something”. But I don’t know how to do that.

Any additional help will be welcomed.
Much thanks again.

Sorry, but with IE I can’t help you, never worked with IE ('cause Mac) and never wanted to work with. So I’m helpless in this situation

[PaulOB]

@ChrisjChrisj

Thanks for all the replies. I added the Paul O’b code and it works successfully in Google (thanks),
But in IE the “click to select file” button doesn’t do anything. IE:

From the look of that screenshot I see there are no round corners in IE which suggests that you are using a browser older than IE9 or have not got a full valid doctype.

The version I posted allows a file to be selected in IE back to IE9 and works locally (but I have no idea if the file then gets uploaded successfully). Is the issue that it won’t select the file or that it won’t pass the data when submit is clicked? That’s one of the reasons why I suggested you use an existing plugin that caters for all these quirks rather then re-inventing the wheel

I’ve moved the thread to the JS forum now as its more of a programming question than a CSS one. The code supplied (mine and Volter9) gives you a button to click and style and shows the filename etc so the front end should be working ok.

[RyanReese]

@volter9

Wow, is that a hack or something? The input tag is self-closing tag, it is probably a mistake.

No clue. I had to download IE11 since I’ve had IE uninstalled for a few years now. On a whim I decided to see what would happen if I did </input> and it fixed it. I’m not gonna act like I know why it fixed it but it did :).

[ChrisjChrisj]

thanks again for all the replies/help