Стиль ввода в Safari с помощью CSS?

Question

Как можно стилизовать поле ввода формы типа file для Safari, Chrome и других браузеров на основе WebKit?

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

Я немного осмотрелся в Google, но ничего полезного не увидел.

Answer 1

Все движки рендеринга автоматически генерируют кнопку при создании. Исторически эта кнопка была совершенно непригодна для стиля. Однако недавно Trident и WebKit добавили хуки через псевдоэлементы.

Trident

Начиная с IE10, кнопка ввода файла может быть стилизована с использованием псевдоэлемента ::-ms-browse. В основном к псевдоэлементу могут применяться любые правила CSS, к которым вы применяете обычную кнопку. Например:

<input type="file">

::-ms-browse {
    background: black;
    color: red;
    padding: 1em;
}

Это отображается следующим образом в IE10 в Windows 8:

WebKit

WebKit предоставляет хук для своей кнопки ввода файла с псевдоэлементом ::-webkit-file-upload-button. Опять же, почти любое правило CSS может быть применено, поэтому пример Trident будет работать и здесь:

<input type="file">

::-webkit-file-upload-button {
    background: black;
    color: red;
    padding: 1em;
}

Это отображается следующим образом в Chrome 26 на OS X:

Answer 2

Несколько дней назад у меня была задача стилизовать input="file" с помощью CSS (в основном CSS3 с дополнительными эффектами), и это можно сделать.

Я написал (или сделал небольшие изменения в плагине filestyle) плагин jQuery. Его основное поведение аналогично изображениям, но я полностью заменил изображения на span s и div s. Плагин скрывает input="file", затем создает оболочку с CSS и, наконец, запускает действия щелчка на скрытом вводе.

Надеюсь, это будет полезно всем.

Вот пример того, как стилизовать input="file" только с CSS.

Answer 3

Если вас интересуют только браузеры webkit, вы можете использовать их встроенные псевдоселекторы для нацеливания на разные части элемента ввода файла. input::-webkit-file-upload-button {...}, например.

Answer 4

Firefox 4 позволит вам стилизовать элементы ввода (в обход): ссылка

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

Answer 5

Наличие Flash-загрузчика может принести еще больше боли:

Он работает в IE только в том же сеансе, что и ваш браузер, а во всех других браузерах он создает новый сеанс, поэтому вы выйдете из своего защищенного приложения.

Единственное решение для этого - отправка данных вашего сеанса также во Flash ... вот и все!

Я приземлился на этой странице, ища или способы стилизовать элемент ввода файла для Safari ... У меня их много в ячейке таблицы шириной всего 150 пикселей, но эти входы заставляют его увеличиваться.

До сих пор я нашел только одно решение: позволить им плавать над остальными, используя style="position:absolute;z-index:2", в то время как мой TD имеет стиль position:relative.

Это плохое, плохое решение, я знаю!

Answer 6

Я не верю, что ты можешь. Apple только недавно решила включить стилизацию своих элементов управления формой. Они считают, что труднее найти кнопки и входные данные, когда они не похожи на кнопки и входные данные, поэтому они могут еще не позволить вам стилизовать входные данные для загрузки файлов.

Я на 90% уверен, что ты не сможешь это сделать.