|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
© Cваял этот сайтик для вас и себя bes13.
-=2009-2013=- |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
У вас Netscape или что то типа того. Ваш IP: 38.107.179.218 | ⇐ туда | на память | сюда ⇒ |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
Стилизация input type file с помощью CSS
это уже можно применять. [2010-04-25] Стилизация <input type="file">Eсли дизайн сайта предполагает сделать <input type="file"> стилизованным, делаем так простеньким способом. Делаем подложку с нужным красивым инпутом, а потом поверх него абсолютно и с нулевой прозрачностью позиционируем настоящий <input type="file">. Сначала нарисуем стилизованный input (file.png):
Дальше делаем обычный <input type="file"> такого же размера как и рисунок-подложка. А рисунок ставим фоном дива, а в этот див кидаем обычный <input type="text"> соответсвующего размера:
Далее позиционируем настоящий инпут поверх подложки и делаем его прозрачным. Итак стили (куда вам удобнее туда и вставляем):
<style>
#form
{
position:relative; /* позиционирование абсолютное элементов внутри формы */
padding:0;
margin:0;
}
#mask
{
width:314px; /* ширина рисунка */
height:30px;
padding:4px 0 0 4px;
background: url(im/file.png) no-repeat 0 0;
}
#fileInput
{
position:absolute;/* позиционируем настоящий <input type="file"> */
cursor:pointer; /*изменим курсор для симпотичности*/
/* задаем нулевую видимость для разных браузеров*/
-ms-filter:"progid:DXImageTransFORM.Microsoft.Alpha(opacity=0)";
filter:progid:DXImageTransFORM.Microsoft.Alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
#fileInputText
{
background:#FFC;
text-align:right;
border:1px solid #FFF;
width:223px;
font-size:11px;
color:#300;
}
</style>
Ну и сам html. В тело <body> вставляем:
<html>
<head>
<title>input</title>
</head>
<body>
<form action="#">
<input type="file" id="fileInput" size="35"
onchange="document.getElementById('fileInputText').value = this.value;" />
<div id="mask">
<input type="text" id="fileInputText" size='47'/>
</div>
</form>
</body>
</html>
Примечание. Мы используем onchange на настоящий инпут, чтобы отобразить путь к файлу в инпуте в слое-подложке. ЗЫ: Минус такого способа: Ну и вот он, итог наших манипуляций: всего коментов:5
ProGrafika
Интересный пример возьму на заметку, правда то что кнопка картинкой не очень радует теперь надо искать стилизацию select ) Спасибо за пример
http://www.prografika.com.ua | Добавлено: [2011-07-09 17:11:17].
Гриша
Есть еще один не плохой способ стилизации type=file. Можете прочитать у меня на сайте. <a href="http://www.clearboth.ru/article/css-style-typefile-tags.html">CSS стили для тэга input type=file</a>.
http://www.clearboth.ru | Добавлено: [2010-12-14 23:29:00].
bes
всё работает и в этих браузерах, просто надо для них явно указывать в css положение imput? позже напишу как это делать |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
