Свой стиль для input type file

Свой стиль для input type file

02016-02-1940144Денис Абдуллин

Просматривая различные сайты с jQuery-плагинами, наткнулся на вполне простой, но нужный, который позволяет создать свой стиль для input type file. Сам стиль вполне годный, но вы легко можете поменять цвета на свои в CSS.

Подойдет для любого сайта. В частности скрипт будет полезен проектам, где пользователям бывает нужно загружать какие-либо файлы на сайт. Это не только может быть файлообменник, это может быть и варез-портал, шаблонов для которых у нас предостаточно.

Ну, а теперь после короткого вступления, перейдем непосредственно к установке скрипта для input.

Установка

Стиль и скрипт будет распространяться на поля input с значение type="file"

Код
<input type="file" name="file1" >

Вставьте в таблицу стилей (CSS):

Код
.fileUpload {
background: #fff;
border: 0;
display: block;
margin: 2% 0 5% 0;
width: 100%;
/* border radius */
-o-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

.fileUpload .fileBtn {
background: #2C88D6;
cursor: pointer;
float: left;
font-size: 1em;
font-weight: bold;
padding: 3% 0;
text-align: center;
width: 33%;
/* border radius */
-o-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
-webkit-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
}
.fileUpload .fileBtn:hover {
background: #2C4356;
}

.fileUpload .fileName {
float: right;
overflow: hidden;
white-space: nowrap;
width: 67%;
text-align: center;
color: #000;
padding: 3% 0;
}

.fileUpload .fileBtn:hover {
-webkit-transition-property: background;
-webkit-transition-duration: 0.4s;
-webkit-transition-timing-function: ease-in;
-moz-transition-property: background;
-moz-transition-duration: 0.4s;
-moz-transition-timing-function: ease-in;
-o-transition-property: background;
-o-transition-duration: 0.4s;
-o-transition-timing-function: ease-in;
-ms-transition-property: background;
-ms-transition-duration: 0.4s;
-ms-transition-timing-function: ease-in;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}

.fileUpload:after {
clear: both;
content: " ";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}

Подключим jQuery и скрипт. В uCoz jQuery уже предустановлен, поэтому первую строку можно удалить:

Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/fileinput.js"></script>

Затем запускаем плагины:

Код
<script>
$(document).ready(function() {
fileInput();
});
</script>

На этом все, в JavaScript-файле есть следующие параметры

Название класса блока, в котором находятся кнопка и название файла:

Код
fi_container_class = fi_container_class || 'fileUpload';

Название класса для кнопки:

Код
fi_button_class = fi_button_class || 'fileBtn';

Название класса для элемента содержащего текст:

Код
fi_filename_class = fi_filename_class || 'fileName';

Текст внутри кнопки:

Код
fi_button_text = fi_button_text || 'Обзор...';

Источник: http://pcvector.net/scripts/forms/437-polzovatelskiy-input-type-file.html


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (4)
Денис Абдуллин 2016-02-20 в 08:41 / Материал
Исправил
0
Dinis 2016-02-19 в 18:58 / МатериалСпам
Поправьте ссылочку....))
0
Анатолий 2016-02-19 в 11:13 / МатериалСпам
Отличный скрипт, может еще для стилизации select скрипт добавите?)
0
Влад Греченков 2016-06-01 в 20:30 / МатериалСпам
Действует только на первый input начиная с второго скрипт не работает.
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.