Есть несколько способов кастомизации (изменения внешнего вида) инпутов такого типа. Все они обладают своими плюсами и минусами, но, на мой взгляд, предложенный мною вариант, выигрывает даже со своими минусами, коих всего один.
Эти самые альтернативные способы – это подмена через 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;
}
Что делает данный код? Объясню по шагам:
- 1. Создаём слой, указываем ему необходимый размер;
- 2. Готовим картинку, кладём её фоном к слою;
- 3. Указываем большой размер шрифта у input, к примеру 199px;
- 4. Указываем input’у отрицательный margin
- 5. Выводим прозрачность на ноль;
- 6. Оформляем всё это красивыми title;
Кстати, мой коллега тут мозг почесал, и придумал аналогичный изврат, но немного в другом ракурсе – предлагаю ознакомиться на страничке его блога. Может у вас есть мысль, как можно оптимизировать или уменьшить код? Если есть – смело делитесь! :)
Осталось проверить этот способ на мобильниках – у кого есть iPhone – можно скрин-шот в студию?
По поводу подарков участникам конкурса, который я запустил на юбилей моего блога – победители определены, и как только мне привезут две бутылки 18ти-летнего молдавского вина – я сразу анонсирую это :) Извините за задержку.
dofollow
У коллеги более наглядная иконка, в плане бюзабилити :)