Размер файла ввода варьируется в Linux / Windows

Question

У меня есть элемент input type="file" с size="70" и width="522px". Он выглядит и отлично работает во всех браузерах в Windows, но в Firefox в Linux входной элемент больше 522 пикселей.

То, что я пробовал:

1. max-width:522px но это не работает (Linux).
2. настройка size="52" и min-width:522px; отлично выглядит в Linux, но не работает в Firefox на Windows.

Что можно сделать, чтобы указать ширину 522 пикселя?

Answer 1

Проблема в том, что браузер не рассматривает кнопку как часть ввода. Так что если у вас есть что-то вроде:

<div style="width: 500px; overflow: hidden">
<input type="file" id="uploadfile_0" class="fileinput" style="border: 2px solid #a9a9a9; width: 100%; height: 22px;" name="uploadfile_0"/>
</div>

Просмотр кнопки ввода находится за пределами родительского элемента, и я не думаю, что есть простое решение для этого.

Вы можете прочитать о стиле ввода type = "file" на quirksmode.org

Answer 2

Укажите только CSS width, например:

<input type="file" style="width: 522px;" ..... />

Answer 3

function inFil() {
    var inFil = document.getElementById("inFil");
    var iSize = inFil.files[0].size;
    alert(iSize);
   // where inFil is existing html tag <input type="button" id="inFil" >
}

Работает с Firefox, но не работает с IE8, другие не тестировались.

Answer 4

Единственный способ, которым я когда-либо видел стилизованные поля ввода файла, - это через трюк, когда поле фактически находится над изображением, а поле имеет нулевую непрозрачность.