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

Question

Какая комбинация CSS или атрибутов необходима?

Answer 1

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

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

См .: http://www.quirksmode.org/dom/inputfile.html

Answer 2

что не так с

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

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

Answer 3

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

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

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

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