CSS

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

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

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

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

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

Ладно, хватит разговоров – приступим. Сразу отмечу, что размеры надо будет проверять в каждом отдельном случае, иначе в IE могут быть неприятные моменты.
<!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 — можно скрин-шот в студию?
Добавлено: 17 Августа 2013 12:01:57 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...