Кастомизация input type=”file” с помощью CSS

[absolvo]

Понял, сейчас передам, спасибо ^_^

[absolvo]

Можно версию более точно?
9.63 — floomby.ru/content/Dc6gVBRsMk/
и заодно,
10.001 — floomby.ru/content/G7Jd53cEsk/

[habraname]

работает сафари4бета-виндовс

[habraname]

бойаните

но в lynx я попробовал
таки работает :-P

[habraname]

и как? ;)

[malaka]

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

[absolvo]

Я сам не сторонник изменять системные элементы, но порою это всё-таки необходимо.

[kellas]

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

[unicast]

Нихьт:
Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9.0.5) Gecko/2008122011 Iceweasel/3.0.7 (Debian-3.0.7-1)

[absolvo]

Просто не кликается? Или выглядит не так, как надо?

[unicast]

Сорри, всё ок. Я в точку кликал ((((:

[absolvo]

Это счётчик =)

[piupiu]

Очень понравилось — «на мой взгляд» =)
А по теме — я за стандартные элементы. Только.

[rnbparty]

хотя бы сделали курсор одинаковый что ли. в фф слева текстовый, правее дефолтный.
идеологически плохая задумка, скверно выполненная
ссылки по теме
habrahabr.ru/blogs/webdev/22926/
habrahabr.ru/blogs/la_france/13704/

[absolvo]

С курсорами и прочими красивостями надо ещё поработать, я с вами согласен.
По поводу идеологии — можно подробнее? Про что вы?

Всё различие между тем, что показали вы, и тем, что показал я — это наличие поля, с адресов самого файла на вашей машине и полное отсутствие яваскрипта в вышеописанном варианте. Из-за последнего пункта, как мне кажется, способ имеет право на жизнь, пусть не везде и не всегда его можно применять.

Кстати, по второй ссылке в комментариях увидел примерно то, о чём я писал. Ну это было очевидно, что я не Америку открыл.

[zerobrain]

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

Если добавлять яваскриптовые или средства сюда, то получится снова не то: автор говорит исключительно про вариант с версткой. С предыдущим «оратором» согласен. Сделано не айс

[taliban]

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

[rnbparty]

соглашусь — отсутствие js явный плюс!
идеология в том, что это как минимум должна быть кнопка (она ассоциируется с действием). то есть хотя бы вместо дива label или inpu type=button/image или а, соответсующе оформленные. title немного спасает положение, помогая пользователю понять, что он может совершить какое то действие

[absolvo]

Можно навести красоту, к примеру, написав на самой картинке — «выбрать файл», сделать заголовок текстом над картинкой, поместив его в label. Способов показать пользователю, что при нажатии будет такой-то экшен довольно много (правда к стандартному виду файл инпута вообще не надо пояснений — но речь не об этом).

Это же просто пример (пример именно того кода, что находится в топике) — не относитесь к нему серьёзно — это незаконченный продукт, а сырая болванка.

Возможно его и правду не надо было выкладывать на Хабр.

[panlancelot]

так всегда было и видимо будет — форум, те же яйца только в профиль =)

[panlancelot]

приятный и прозрачный код, спасибо.

[lightcyber]

Напишите плз как можно на flash сделать множественный выбор файлов (через ctrl) в окне выбора.

[ivv]

можно использовать готовый аплоадер на флеше, demo.swfupload.org

очень гибко настраивается и довольно неплохо работает.

[sunnybear]

прикольно. У меня в левом нижем углу относительно блока в FF3 моргает курсорчик. Маленький такой, пикселя 2.

[django]

vremenno.net/design/file-inputs-styling/

[rmaksim]

margin-left:-450px; — это что бы на саму кнопку попасть???
а если вместо отступа просто float:right; для инпута сделать

[absolvo]

Для инпута можно direction: rtl;

[rmaksim]

да, видел как у твоего коллеги сделано
ну тут собственно и оптимизировать больше нечего…

[imalcolm]

[absolvo]

Спасибо!

А работает? :)

[imalcolm]

айдафон не умеет отправлять файлы) там всё строго) ни вздохнуть ни пёрнуть)

[absolvo]

Ой — не знал :)

[homm]

Раз уж темя про инпуты — у оперы есть замечательные типы инпута type=«url» и type=«email».

[shergin]

Этому способу уже сто лет, но знают его и пользуют действительно единицы.
Первый раз я его увидил на Новом интерфейсе Яху-почты, только там они для скрытия input используют более корректную технику — css2:clip;

[absolvo]

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

[shergin]

Да, это верно, но можно использовать схему relative -> absolute.

[absolvo]

Ну тогда ценность в виде лёгкости clip'a изчезает :)

[yellow_duck]

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

[shergin]

Это к чему вопрос?.. Почтой Яндекса пользуются все, и, да, она клевая.
Я говорил о Yahoo Mail, который открылся года 3 назад, и да, она не клевая.

[Nail13]

Браузер FF2, в приведенном вами демо: активная область (там где воспринимается клик) смещена примерно 15px вправо, то есть левая часть кнопки не реагирует на клики (курсор попадает в file-name-field).
Спасет direction: rtl

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

[almalexa]

Не трогайте оценку этого коммента! Она гармонична!

[gorinich]

Когда-то давно делал почти так же
gorinich.net/posts/8

[sdmitry]

По поводу невозможности вставить адрес файла через копи-паст, то есть обходной манёвр. Уже в самом диалоге выбора файла можно запросто вставлять полный путь файла и смело жать «Открыть».

[ChemAli]

В варианте Вашего друга у меня диалог выбора файла открывается только по двойному клику.
IE8 + GreenBrowser.

[WoZ]

встретил бы просто так, не знаю что где-то тут кнопка загрузки — никогда бы не нажал. воспринимается как картинка и взгляд не цепляется, как за инпут.

[absolvo]

Это же пример — картинка может быть любой, именно той, что поможет пользователю понять, в чём тут дело :)

[yellow_duck]

Чувак, че-то в сафари 4(10.5.6) не очень. Т.е. работает только верхняя часть. А большая часть картинки не хочет.

[viruseg]

Как-то слишком много ненужных свойств для инпута прописано.
Вполне достаточно:

input {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
}

На самом деле margin лишний, но мало ли он нужен в каких-то старых браузерах.