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

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

    Эти самые альтернативные способы – это подмена через JavaScript, это flash загрузчик, ну или href=mailto =)

    Плюсы и минусы каждого из них, я думаю, вполне очевидны и понятны. Наиболее распространён вариант с flash загрузчиком, на JavaScript’е извращаются много реже. Стилями же это делают, по моим наблюдениям, вообще единицы.

    У варианта со стилями есть один большой (а для всех ли сайтов и вариантов размещения такого инпута большой ли?!) минус, на который я время от времени благополучно не обращаю внимание – это невозможность посмотреть имя файла, указанного в этом инпуте, и, как следствие, невозможность вставить адрес файла copy-paste, что порою очень удобно.

    Ладно, хватит разговоров – приступим. Сразу отмечу, что размеры надо будет проверять в каждом отдельном случае, иначе в IE могут быть неприятные моменты.

    Пример можно посмотреть на этой страницу — absolvo.ru/tmp/17

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <style>
        div {
          overflow:hidden;
          width:95px;
          height:37px;
          cursor:pointer;
          background:url(input-file.gif) no-repeat;
        }
        input {
          opacity:0;
          filter:alpha(opacity:0);
          font-size:199px;
          cursor:pointer;
          padding:0px;
          margin:0px;
          border:none;
          margin-left:-450px;
        }
      </style>
    </head>
    <body>
    <div title="Нажмите на меня, для обзора файла">
    <input type="file" size="1" />
    </div>
    </body>
    </html>


    Что делает данный код? Объясню по шагам:
    1. Создаём слой, указываем ему необходимый размер;
    2. Готовим картинку, кладём её фоном к слою;
    3. Указываем большой размер шрифта у input, к примеру 199px;
    4. Указываем input’у отрицательный margin
    5. Выводим прозрачность на ноль;
    6. Оформляем всё это красивыми title;

    Кстати, мой коллега тут мозг почесал, и придумал аналогичный изврат, но немного в другом ракурсе — предлагаю ознакомиться на страничке его блога (в Opera9 не работает (я пропустил, а dimarf заметил), однако в Opera10 всё нормально). Может у вас есть мысль, как можно оптимизировать или уменьшить код? Если есть — смело делитесь! :)

    Осталось проверить этот способ на мобильниках — у кого есть iPhone — можно скрин-шот в студию?

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 57

    • UFO just landed and posted this here
      • UFO just landed and posted this here
          0
          Понял, сейчас передам, спасибо ^_^
          • UFO just landed and posted this here
            • UFO just landed and posted this here
            0
            Можно версию более точно?
            9.63 — floomby.ru/content/Dc6gVBRsMk/
            и заодно,
            10.001 — floomby.ru/content/G7Jd53cEsk/
            0
            работает сафари4бета-виндовс
            • UFO just landed and posted this here
                +2
                бойаните

                но в lynx я попробовал
                таки работает :-P
                • UFO just landed and posted this here
            +6
            на сафари и фф работает.
            фишка сама по себе интересная и работает гладенько, но есть у меня соображение, что такие вещи может быть стоит не форматировать, а оставлять дефолтные форматы браузеров, чтобы не смущать пользователей. ведь пользователь, желая подгрузить файл, ищет глазом привычный интерфейс для загрузки, а ему такую, хоть и козырную, но непривычную фишку предлагают. если б я с таким столкнулся, я бы в первый момент не понял, где файл подгружать, даже несмотря на всплывающую подсказку – просто за столько лет стандартного интерфейса загрузки глаз настолько привык к одному и тому же, что стормозил бы.
            • UFO just landed and posted this here
                0
                Я сам не сторонник изменять системные элементы, но порою это всё-таки необходимо.
                  0
                  Вы пожалуй слишком большое внимание уделили используемым в примерах картинкам, можно ведь что-нибудь достаточно вменяемое воткнуть, не в ущерб удобности.
                  0
                  Нихьт:
                  Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9.0.5) Gecko/2008122011 Iceweasel/3.0.7 (Debian-3.0.7-1)
                    0
                    Просто не кликается? Или выглядит не так, как надо?
                      0
                      Сорри, всё ок. Я в точку кликал ((((:
                        0
                        Это счётчик =)
                    +1
                    Очень понравилось — «на мой взгляд» =)
                    А по теме — я за стандартные элементы. Только.
                      0
                      хотя бы сделали курсор одинаковый что ли. в фф слева текстовый, правее дефолтный.
                      идеологически плохая задумка, скверно выполненная
                      ссылки по теме
                      habrahabr.ru/blogs/webdev/22926/
                      habrahabr.ru/blogs/la_france/13704/
                        –1
                        С курсорами и прочими красивостями надо ещё поработать, я с вами согласен.
                        По поводу идеологии — можно подробнее? Про что вы?

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

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

                          Если добавлять яваскриптовые или средства сюда, то получится снова не то: автор говорит исключительно про вариант с версткой. С предыдущим «оратором» согласен. Сделано не айс
                            0
                            это просто демка, имя файлап можно показать отдельно с помошью JS, получится как в сафари… просто все инпуты как инпуты, их можно стилями подправить, а вот файлы нельзя… а так можно под дизайн обрамлять
                            +3
                            соглашусь — отсутствие js явный плюс!
                            идеология в том, что это как минимум должна быть кнопка (она ассоциируется с действием). то есть хотя бы вместо дива label или inpu type=button/image или а, соответсующе оформленные. title немного спасает положение, помогая пользователю понять, что он может совершить какое то действие
                              0
                              Можно навести красоту, к примеру, написав на самой картинке — «выбрать файл», сделать заголовок текстом над картинкой, поместив его в label. Способов показать пользователю, что при нажатии будет такой-то экшен довольно много (правда к стандартному виду файл инпута вообще не надо пояснений — но речь не об этом).

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

                              Возможно его и правду не надо было выкладывать на Хабр.
                                +1
                                Спасибо вам большое за то что вы это выложили на Хабре!

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

                                Народ, автор не призывает это лепить везде, автор просто описал забавный трикс.
                                  0
                                  так всегда было и видимо будет — форум, те же яйца только в профиль =)
                                  0
                                  приятный и прозрачный код, спасибо.
                            –2
                            Напишите плз как можно на flash сделать множественный выбор файлов (через ctrl) в окне выбора.
                              0
                              можно использовать готовый аплоадер на флеше, demo.swfupload.org

                              очень гибко настраивается и довольно неплохо работает.
                              0
                              прикольно. У меня в левом нижем углу относительно блока в FF3 моргает курсорчик. Маленький такой, пикселя 2.
                                +3
                                vremenno.net/design/file-inputs-styling/
                                  0
                                  margin-left:-450px; — это что бы на саму кнопку попасть???
                                  а если вместо отступа просто float:right; для инпута сделать
                                    0
                                    Для инпута можно direction: rtl;
                                      0
                                      да, видел как у твоего коллеги сделано
                                      ну тут собственно и оптимизировать больше нечего…
                                    +2
                                      0
                                      Спасибо!

                                      А работает? :)
                                        +3
                                        айдафон не умеет отправлять файлы) там всё строго) ни вздохнуть ни пёрнуть)
                                          –1
                                          Ой — не знал :)
                                      0
                                      Раз уж темя про инпуты — у оперы есть замечательные типы инпута type=«url» и type=«email».
                                        0
                                        Этому способу уже сто лет, но знают его и пользуют действительно единицы.
                                        Первый раз я его увидил на Новом интерфейсе Яху-почты, только там они для скрытия input используют более корректную технику — css2:clip;
                                          0
                                          Параметр clip работает только для абсолютно позиционированных элементов, что невсегда удобно.
                                            0
                                            Да, это верно, но можно использовать схему relative -> absolute.
                                              0
                                              Ну тогда ценность в виде лёгкости clip'a изчезает :)
                                            0
                                            Дедкэт, че яндексоиды правда пользуются я.почтой?
                                              0
                                              Это к чему вопрос?.. Почтой Яндекса пользуются все, и, да, она клевая.
                                              Я говорил о Yahoo Mail, который открылся года 3 назад, и да, она не клевая.
                                            0
                                            Браузер FF2, в приведенном вами демо: активная область (там где воспринимается клик) смещена примерно 15px вправо, то есть левая часть кнопки не реагирует на клики (курсор попадает в file-name-field).
                                            Спасет direction: rtl

                                            В целом решение считаю вполне изящным, спасибо. До сих пор пользовался техникой движения инпута под курсором, теперь перейду на ваш метод :)
                                            • UFO just landed and posted this here
                                                0
                                                Не трогайте оценку этого коммента! Она гармонична!
                                                0
                                                Когда-то давно делал почти так же
                                                gorinich.net/posts/8
                                                  0
                                                  По поводу невозможности вставить адрес файла через копи-паст, то есть обходной манёвр. Уже в самом диалоге выбора файла можно запросто вставлять полный путь файла и смело жать «Открыть».
                                                    0
                                                    В варианте Вашего друга у меня диалог выбора файла открывается только по двойному клику.
                                                    IE8 + GreenBrowser.
                                                      0
                                                      встретил бы просто так, не знаю что где-то тут кнопка загрузки — никогда бы не нажал. воспринимается как картинка и взгляд не цепляется, как за инпут.
                                                        0
                                                        Это же пример — картинка может быть любой, именно той, что поможет пользователю понять, в чём тут дело :)
                                                        0
                                                        Чувак, че-то в сафари 4(10.5.6) не очень. Т.е. работает только верхняя часть. А большая часть картинки не хочет.
                                                          0
                                                          Как-то слишком много ненужных свойств для инпута прописано.
                                                          Вполне достаточно:
                                                          input {
                                                              display: block;
                                                              width: 100%;
                                                              height: 100%;
                                                              margin: 0;
                                                              opacity: 0;
                                                          }
                                                          

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

                                                          Only users with full accounts can post comments. Log in, please.