Установка единой ширины <input type = "file"> во всех браузерах
Какая комбинация CSS или атрибутов необходима?
Ответы 3
- Скрыть фактический контроль
- Сделал DIV с элементами управления и стилями, которые вам нужны.
Кнопка не является стандартным элементом управления HTML.
См .: http://www.quirksmode.org/dom/inputfile.html
Абсолютно нет необходимости использовать непрозрачность - вы можете просто делегировать щелчок по дисплею: ни один элемент - намного проще, и вам не нужно учитывать (варьирующийся) размер ввода.
Браузеры не позволяют делегировать щелчки при вводе файла в качестве функции безопасности. Итак, нам нужна непрозрачность для взлома
Что случилось с
<input type = "file" size = "50" .... />
? Я думаю, будет выглядеть так же, за исключением сафари на Mac (на Mac все элементы управления загрузкой выглядят по-разному во всех браузерах)
input-width ничего не делает. Возможно, вы думаете о input-size, который меняет ширину, но не в единицах, которые вы можете стандартизировать для разных браузеров.
Это работает ... он обрабатывает firefox ... в то время как ширина CSS обрабатывает Chrome, IE и Safari
Если вы хотите установить более точный размер, можно использовать скрытую видимость при двоичном поиске нужного размера с помощью javascript ...! Я сомневаюсь, что оно того стоит, но я бы предпочел это, а не скрытие фактического элемента управления.
W3C не может проверить атрибут size, потому что он разрешен только для полей типа text, search, url, tel, e-mail, or password.
"файловый" ввод выглядит и пахнет как "текстовый" ввод, так что мне интересно, в чем смысл отсутствия проверки, на самом деле. Да, я знаю, что это не действует как "текст", но все же принимает символы и является прямоугольником точно так же ...
В дополнение к учебнику 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).
Лично я боролся с настраиваемыми окнами загрузки, и нет серебряной пули для улучшения их внешнего вида или настройки. (особенно в отношении поведения курсора, поскольку я считаю, что пользовательский интерфейс нарушает правила). В конце концов, я думаю, что проще согласиться с тем, что разные браузеры будут отображать элемент управления по-разному, и именно так оно и есть.
так что нет возможности добиться этого с помощью самого встроенного элемента управления?