Есть несколько способов кастомизации (изменения внешнего вида) инпутов такого типа. Все они обладают своими плюсами и минусами, но, на мой взгляд, предложенный мною вариант, выигрывает даже со своими минусами, коих всего один.
Эти самые альтернативные способы – это подмена через JavaScript, это flash загрузчик, ну или href=mailto =)
Плюсы и минусы каждого из них, я думаю, вполне очевидны и понятны. Наиболее распространён вариант с flash загрузчиком, на JavaScript’е извращаются много реже. Стилями же это делают, по моим наблюдениям, вообще единицы.
У варианта со стилями есть один большой (а для всех ли сайтов и вариантов размещения такого инпута большой ли?!) минус, на который я время от времени благополучно не обращаю внимание – это невозможность посмотреть имя файла, указанного в этом инпуте, и, как следствие, невозможность вставить адрес файла copy-paste, что порою очень удобно.
Ладно, хватит разговоров – приступим. Сразу отмечу, что размеры надо будет проверять в каждом отдельном случае, иначе в IE могут быть неприятные моменты.
Пример можно посмотреть на этой страницу — absolvo.ru/tmp/17
Что делает данный код? Объясню по шагам:
1. Создаём слой, указываем ему необходимый размер;
2. Готовим картинку, кладём её фоном к слою;
3. Указываем большой размер шрифта у input, к примеру 199px;
4. Указываем input’у отрицательный margin
5. Выводим прозрачность на ноль;
6. Оформляем всё это красивыми title;
Кстати, мой коллега тут мозг почесал, и придумал аналогичный изврат, но немного в другом ракурсе — предлагаю ознакомиться на страничке его блога (в Opera9 не работает (я пропустил, а dimarf заметил), однако в Opera10 всё нормально). Может у вас есть мысль, как можно оптимизировать или уменьшить код? Если есть — смело делитесь! :)
Осталось проверить этот способ на мобильниках — у кого есть iPhone — можно скрин-шот в студию?
Эти самые альтернативные способы – это подмена через 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 — можно скрин-шот в студию?
