Установка единой ширины <input type="file"> во всех браузерах

Ответ 1

• Скрыть фактический элемент управления
• Сделано DIV с элементами управления и стилями, которые вы хотите сверху.

Кнопка не является стандартным элементом управления HTML.

Смотрите: http://www.quirksmode.org/dom/inputfile.html

Ответ 2

что не так с

<input type="file" size="50" .... />

? Будет выглядеть так же, кроме сафари на Mac, я думаю (на Mac, все элементы управления загрузкой выглядят по-другому, во всех браузерах)

Ответ 3

В дополнение к учебнику quirksmode, здесь еще один хороший ресурс: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Если вы скрываете фактический элемент управления, помните, что очень важно установить непрозрачность элемента управления на ноль и фактически не использовать visibility: hidden. Выполнение этого фактически скроет элемент, отключив действие click.

Кроме того, если вы закрываете элемент управления графической кнопкой, помните, что в некоторых браузерах (например, Firefox и IE) вы не сможете изменить тип курсора на руку, когда он закончится текстовая часть элемента управления файлом (он всегда будет по умолчанию для ввода или обычного указателя без ссылки). И да, я пробовал использовать cursor: pointer (и cursor: hand).

Лично я боролся с настраиваемыми ящиками для загрузки, и нет никакой серебряной пули, чтобы добиться их внешнего вида или настройки. (особенно в отношении поведения курсора, поскольку я считаю, что разблокировка пользовательского интерфейса). В конце концов, я думаю, что просто легче принять, что разные браузеры будут обрабатывать элемент управления по-разному, и что именно так оно и есть.