CODEWITHSUNDEEP
htmlformsinternet-explorermicrosoft-edge
Sabreur
Sabreur

Reputation: 21

Edge & IE11 not displaying Input type file box correctly

I have a problem with Edge and IEv11 not displaying an 'Input type file' box incorrectly.

Screenshot

<form action = "" method = "POST" >
<table width="100%" style="font-size:12px">
    <tbody>
        <tr><th colspan="2" style="font-size:12px;font-style:italic;color:#a00000;text-align:left">Select your image file&#8230;</th></tr>
        <tr><td><div style="width:140px"></div></td><td><input type = "file" name = "image" /></td></tr>
        <tr><td></td><td align="left"><input type = "submit" value="Upload" name="Upload Image"  /></td></tr>
    </tbody>
</table>

Is my code wrong or is there a workaround? It looks fine in Firefox and Safari.

Upvotes: 0

Views: 1120

Answers (2)

Sabreur
Sabreur

Reputation: 21

Not quite the answer I would like but it's the best compromise between the results in Edge/IE the rest. Result from Firefox

Result from Edge (IE identical)

I wrapped the Input element in a div...

<div class="dbrdForm" style="background-color:#fff;  width:240px; height:22px;padding:0;border-radius:10px; border: 2px inset #ddd;"><input type = "file" name = "image" /></div>

The width of 240px was the largest I could use, anything larger resulted in the box extending to the right of the browse button in Edge/IE. I originally used 350px in FF to match other boxes in the form.

Upvotes: 1

misorude
misorude

Reputation: 3431

This is not necessarily "wrong" to begin with - there is no real tight specification as to how the browser should render such a file upload control.

Your best option, if you want full control over how this looks, is to implement the technique presented here, https://tympanus.net/Tutorials/CustomFileInputs/

This basically hides to native control the browser renders for such a file input field, and replaces it with a representation of your choice. (This needs JavaScript to fully work, but can easily be implemented in such a way that it will still show the original control, if JS is not available.)

Upvotes: 0

Related Questions