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

К

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

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

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

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

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

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

Пример можно посмотреть на этой страницу — http://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;

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

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

По поводу подарков участникам конкурса, который я запустил на юбилей моего блога — победители определены, и как только мне привезут две бутылки 18ти-летнего молдавского вина — я сразу анонсирую это :) Извините за задержку.

Дмитрий Волотко

Метки

Страницы