Edge & IE11 не отображает окно ввода типа файла правильно

Question

У меня проблема с Edge и IEv11, которые неправильно отображают окно «Тип файла ввода».

<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>

Мой код неверен или есть обходной путь? Отлично смотрится в Firefox и Safari.

Answer 1

Не совсем тот ответ, который я хотел бы получить, но это лучший компромисс между результатами в Edge / IE и остальными. Результат от Firefox

Результат от края (IE идентично)

Я обернул элемент Input в 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>

Ширина 240px была самой большой, которую я мог использовать, все, что больше, привело к тому, что прямоугольник расширялся справа от кнопки обзора в Edge / IE. Первоначально я использовал 350px в FF, чтобы сопоставить другие поля в форме.

Answer 2

Это не обязательно «неправильно» с самого начала - нет точной спецификации относительно того, как браузер должен отображать такой элемент управления загрузкой файлов.

Ваш лучший вариант, если вы хотите получить полный контроль над тем, как это выглядит, это реализовать представленную здесь технику, https://tympanus.net/Tutorials/CustomFileInputs/

Это в основном скрывает собственный контроль, который браузер отображает для такого поля ввода файла, и заменяет его представлением по вашему выбору. (Для полноценной работы требуется JavaScript, но его можно легко реализовать таким образом, чтобы он по-прежнему отображал исходный элемент управления, если JS недоступен.)