Я думаю, что многих, как и меня, не совсем устраивает стандартный вид поля загрузки файлов. Помимо того, что оно, грубо говоря, некрасивое, так еще и в разных браузерах выглядит по-разному.

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

Для решения задачи нам поможет тег label , который связывает текст и прочие элементы с элементами формы (в нашем случае – с кнопкой), jQuery (который поможет нам получить необходимую информацию о выбранных файлах – имена и их расширение) и дополнительное поле input, где мы будем непосредственно хранить нашу информацию о файлах.

1. Первое, что вам потребуется – это само поле с выбором файла. Код его следующий:

Обзор...

И выглядит все это пока так:

Как вы заметили в коде, дополнительное текстовое поле мы заблокировали, чтобы в дальнейшем пользователь не мог на него воздействовать, ведь в нем у нас будет выводиться информация о файле.

2. Теперь мы напишем небольшой скрипт, который как раз и будет выводить нам информацию о файле:

$(document).ready(function() { $(".main_input_file").change(function() { var f_name = ; for (var i = 0; i < $(this).get(0).files.length; ++i) { f_name.push(" " + $(this).get(0).files[i].name); } $("#f_name").val(f_name.join(", ")); }); });

Код желательно вставить перед закрывающим тегом . И смотрим, что у нас получилось:

Отлично! То, что нам нужно. Теперь осталось скрыть стандартное поле выбора файла и причесать нашу созданную форму.

3. Для этого напишем небольшой CSS-стиль:

Main_input_file { display: none; } .upload_form div { width: 100px; height: 32px; background: #3498db; border-radius: 4px; color: #fff; text-align: center; line-height: 32px; font-family: arial; font-size:14px; display: inline-block; vertical-align: top; } .upload_form div:hover { background: #2980b9; cursor: pointer; } #f_name { background: transparent; border: 0; display: inline-block; vertical-align: top; height: 30px; padding: 0 8px; width: 150px; }

Все это сохраняем и любуемся результатом:

По-моему, очень неплохо.

Возможные ошибки в работе этого метода

Из так называемых проблем, по которым этот способ может у вас не сработать, – это отсутствие библиотеки jQuery (очень частая проблема статичных сайтов). Решается следующим способом.

Перед закрывающим тегом подключите библиотеку:

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

Я думаю, что многих, как и меня, не совсем устраивает стандартный вид поля загрузки файлов. Помимо того, что оно, грубо говоря, некрасивое, так еще и в разных браузерах выглядит по-разному.

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

Для решения задачи нам поможет тег label , который связывает текст и прочие элементы с элементами формы (в нашем случае – с кнопкой), jQuery (который поможет нам получить необходимую информацию о выбранных файлах – имена и их расширение) и дополнительное поле input, где мы будем непосредственно хранить нашу информацию о файлах.

1. Первое, что вам потребуется – это само поле с выбором файла. Код его следующий:

Обзор...

И выглядит все это пока так:

Как вы заметили в коде, дополнительное текстовое поле мы заблокировали, чтобы в дальнейшем пользователь не мог на него воздействовать, ведь в нем у нас будет выводиться информация о файле.

2. Теперь мы напишем небольшой скрипт, который как раз и будет выводить нам информацию о файле:

$(document).ready(function() { $(".main_input_file").change(function() { var f_name = ; for (var i = 0; i < $(this).get(0).files.length; ++i) { f_name.push(" " + $(this).get(0).files[i].name); } $("#f_name").val(f_name.join(", ")); }); });

Код желательно вставить перед закрывающим тегом . И смотрим, что у нас получилось:

Отлично! То, что нам нужно. Теперь осталось скрыть стандартное поле выбора файла и причесать нашу созданную форму.

3. Для этого напишем небольшой CSS-стиль:

Main_input_file { display: none; } .upload_form div { width: 100px; height: 32px; background: #3498db; border-radius: 4px; color: #fff; text-align: center; line-height: 32px; font-family: arial; font-size:14px; display: inline-block; vertical-align: top; } .upload_form div:hover { background: #2980b9; cursor: pointer; } #f_name { background: transparent; border: 0; display: inline-block; vertical-align: top; height: 30px; padding: 0 8px; width: 150px; }

Все это сохраняем и любуемся результатом:

По-моему, очень неплохо.

Возможные ошибки в работе этого метода

Из так называемых проблем, по которым этот способ может у вас не сработать, – это отсутствие библиотеки jQuery (очень частая проблема статичных сайтов). Решается следующим способом.

Перед закрывающим тегом подключите библиотеку:

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

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы:

  • флажок ;
  • переключатель ;
  • поле для выбора файла .
  • поле для ввода чисел .
  • раскрывающийся список ;
Демонстрация работы плагина

Живые примеры можно посмотреть на отдельной странице . Стоит заметить, что при оформлении элементов форм не использовано ни одного изображения, только CSS.

Достоинства
  • Общее:
    • Простота оформления с помощью CSS.
    • При отключенном JavaScript отображаются стандартные элементы форм, т.е. их работоспособность не теряется.
    • Псевдоэлементы выводятся внутристрочно, т.е. повторяют свойство стандартных элементов.
    • Поддержка работы с динамически добавляемыми/изменяемыми элементами.
    • Поддержка атрибутов checked , selected , disabled .
    • Атрибуты class , id , data-* , title , указанные у оригинальных элементов форм, передаются в соответствующие псевдоэлементы (id передается с суффиксом, чтобы избежать дублирования).
    • Поддержка динамического добавления/изменения атрибутов class , id , data-* , title .
    • Поддержка сброса формы при нажатии на .
    • Умеет «ловить» нажатие клавиши Tab и позволяет переключать элементы с клавиатуры.
    • Кроссбраузерность (все современные браузеры, а также IE8 и выше).
    • Поддержка валидации HTML5.
    • Поддержка мультиязычности.

    • Для селектов:

    • Поддерживает атрибут multiple , т.е. позволяет выбирать несколько пунктов (мультиселект).
    • Поддерживает группировку элементов списка в селекте (тег ).
    • Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height , либо через опцию selectVisibleOptions).
    • Поддерживает «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
    • Поддержка поиска по пунктам одиночного селекта.
    • Поддержка замещающего текста (placeholder).
    • Автоматически подстраивает ширину, если она не указана.
    • Поддерживает прокрутку колесом мыши.
Недостатки

  • При использовании некоторых нестандартных шрифтов (например, Open Sans, подключенный с Google Fonts), неправильно определяется ширина псевдоселекта, в связи с чем текст пунктов обрезается. Это связано с тем, что шрифт применяется лишь после стилизации селекта плагином. Как вариант решения этой проблемы, можно сделать отложенный запуск скрипта:

    setTimeout(function() { $("input, select").styler(); }, 100)

    Еще один вариант решения — использовать , который переинициализирует плагин после окончания загрузки шрифта.

  • В Mac OS при переключении селекта с клавиатуры появляется нативный выпадающий список.
СкачатьПодключение плагина

Для работы плагина необходимо использовать jQuery не ниже версии 1.7.0.

Подключите jQuery (если он еще не подключен), плагин и стили к нему, добавив следующие строки перед тегом :

Файл jquery.formstyler.css — это обязательные стили, необходимые для корректной работы плагина, а jquery.formstyler.theme.css — визуальное оформление элементов форм.

Для активации плагина примените метод.styler к тегам, которые хотите стилизовать:

(function($) { $(function() { $("input, select").styler(); }); })(jQuery);

Отключение плагина (метод destroy)

Если есть необходимость отвязать плагин от стилизованного элемента, то задействуйте метод destroy:

$("select").styler("destroy");

Динамическое изменение

При динамическом изменении элементов формы необходимо запустить триггер refresh , например:

$("button").click(function(e) { e.preventDefault(); /* делаем чекбокс неактивным */ $("input:checkbox").attr("disabled", true) /* обновляем состояние псевдочекбокса */ .trigger("refresh"); });

При использовании сторонних плагинов, например, jQuery Validation , которые меняют атрибуты элементов формы, событие.trigger("refresh") необходимо запускать, используя setTimeout , иначе состояния псевдоэлементов не изменится. Пример с вышеуказанным плагином:

$("form").validate({ invalidHandler: function() { setTimeout(function() { $("input, select").trigger("refresh"); }, 1) } });

Опции плагина

Большинство опции плагина можно переопределить для конкретного тега, указав ему соответствующий data-атрибут.

Опция По умолчанию Описание data-атрибут
idSuffix -styler суффикс к атрибуту id , передаваемому от стилизуемого элемента
filePlaceholder Файл не выбран текст по умолчанию в поле выбора файла (когда файл не выбран) data-placeholder
fileBrowse Обзор... текст кнопки у поля для выбора файла data-browse
fileNumber Выбрано файлов: %s текст после выбора нескольких файлов, вместо %s вставится число data-number
selectPlaceholder Выберите... замещающий текст (плейсхолдер) в одиночном селекте; отображается, если по умолчанию выбран первый пункт с отсутствующим текстом: data-placeholder
selectSearch false показывать поисковое поле в одиночном селекте (true — да, false — нет) data-search
selectSearchLimit 10 минимальное количество пунктов одиночного селекта, при котором показывать поиск data-search-limit
selectSearchNotFound Совпадений не найдено текст сообщения о том, что нет пунктов, удовлетворяющих поиску data-search-not-found
selectSearchPlaceholder Поиск... текст по умолчанию в поисковом поле data-search-placeholder
selectVisibleOptions 0 количество отображаемых пунктов списка в простом селекте без прокрутки data-visible-options
selectSmartPositioning true умное позиционирование для выпадающего списка селекта:
true — работает вверх и вниз
false — работает только вниз
"-1" — позиционирование отключено 		data-smart-positioning
locale ru текущая локаль
locales английская локализация массив локалей с переводом соответствующих опций, подробнее смотрите
Колбеки (callbacks)

Пример использования:

$("input, select").styler({ fileBrowse: "Выбрать", singleSelectzIndex: "999", onSelectOpened: function() { // к открытому селекту добавляется красная обводка $(this).css("outline", "3px solid red"); } });

Локализация

Плагин поддерживает многоязычность. Для этого используются опции locale и locales .

Пример локализации (английская по умолчанию включена в плагин):

$("input, select").styler({ locale: "en", locales: { "en": { filePlaceholder: "No file selected", fileBrowse: "Browse...", fileNumber: "Selected files: %s", selectPlaceholder: "Select...", selectSearchNotFound: "No matches found", selectSearchPlaceholder: "Search..." } }, });

CSS-селекторы, используемые для оформленияЧекбокс Радиокнопка Поле для выбора файла Поле для ввода чисел Селект (простой) Селект (множественный) Прочие элементы (только CSS)
.jq-checkbox чекбокс по умолчанию
.jq-checkbox__div дополнительный вложенный тег
.jq-checkbox.checked выбранный чекбокс
.jq-checkbox.disabled неактивный (недоступный для выбора) чекбокс
.jq-checkbox.focused фокус на чекбоксе, когда нажата клавиша Tab
.jq-checkbox span дополнительный вложенный тег
.jq-radio радиокнопка по умолчанию
.jq-radio__div дополнительный вложенный тег
.jq-radio.checked выбранная радиокнопка
.jq-radio.disabled неактивная (недоступная для выбора) радиокнопка
.jq-radio.focused фокус на радиокнопке, когда нажата клавиша Tab
.jq-radio span дополнительный вложенный тег
.jq-file родительский контейнер
.jq-file.focused фокус на поле
.jq-file.changed файл выбран
.jq-file.disabled неактивное поле
.jq-file__name поле с именем файла
.jq-file__browse кнопка выбора файла
.jq-number родительский контейнер
.jq-number.focused фокус на поле
.jq-number.disabled неактивное поле
.jq-number__field обертка для поля ввода
.jq-number__spin.minus кнопка «минус»
.jq-number__spin.plus кнопка «плюс»
.jq-selectbox родительский контейнер
.jq-selectbox.opened выпадающий список селекта раскрыт
.jq-selectbox.dropup выпадающий список селекта раскрыт вверх
.jq-selectbox.dropdown выпадающий список селекта раскрыт вниз
.jq-selectbox.changed выбрано значение, отличное от заданного по умолчанию
.jq-selectbox__select селект в свернутом состоянии
.focused .jq-selectbox__select фокус на селекте, когда нажата клавиша Tab
.disabled .jq-selectbox__select
.jq-selectbox__select-text дополнительный вложенный тег для свернутого селекта
.jq-selectbox .placeholder замещающий текст
.jq-selectbox__trigger правая часть свернутого селекта (условный переключатель)
.jq-selectbox__trigger-arrow вложенный тег для переключателя (стрелка)
.jq-selectbox__dropdown обертка для выпадающего списка
.jq-selectbox__search обертка для поискового поля
.jq-selectbox__search input поисковое поле
.jq-selectbox__not-found сообщение об отсутствии результатов поиска
.jq-selectbox ul выпадающий список
.jq-selectbox li пункт (опция) селекта
.jq-selectbox li.selected выбранный пункт селекта
.jq-selectbox li.disabled
.jq-selectbox li.optgroup заголовок для группы пунктов
.jq-selectbox li.option пункт списка в группе
.jq-select-multiple родительский контейнер
.jq-select-multiple.disabled неактивный (недоступный для выбора) селект
.jq-select-multiple li пункт (опция) селекта
.jq-select-multiple li.selected выбранный пункт селекта
.jq-select-multiple li.disabled неактивный (недоступный для выбора) пункт селекта
.jq-select-multiple li.optgroup заголовок для группы пунктов
.jq-select-multiple li.option пункт списка в группе
.styler класс, используемый для стилизации текстовых полей и кнопок (работает независимо от плагина)

Здравствуйте уважаемые читатели блога сайт! Одной из самых сложных задач для верстальщика является стилизация элементов формы так, как видит их дизайнер. Тем более по умолчанию такие поля как select, checkbox или file совершенно отличаются внешне в разных браузерах. В этой статье рассмотрим способы стилизации поля для загрузки файла , чтобы оно одинаково выглядело в большинстве браузеров.

На мой взгляд, наиболее оптимальным решением будет обернуть поле input с типом file в тег label. Затем скрываем поле input file , а при клике по элементу label будет вызываться окно выбора файла.

Html — код вставки поля для загрузки файла в этом случае будет таким:

Выберите файл

File-upload input{
display: none;/* скрываем input file */
}
/* задаем стили кнопки выбора файла*/
.file-upload {
position: relative;
overflow: hidden;
width: 250px;
height: 40px;
background: #4169E1;
border-radius: 10px;
color: #fff;
text-align: center;
}
.file-upload:hover {
background: #1E90FF;
}
/* Растягиваем label на всю область блока.file-upload */
.file-upload label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* стиль текста на кнопке*/
.file-upload span {
line-height: 40px;
font-weight:bold;
}

Большинство CSS правил для класса.file-upload можно менять под Ваши нужды (такие как background, border-radius, color, width и height), так как они в основном отвечают за внешний вид кнопки выбора файла.

В результате в окне браузера мы видим стилизованную кнопку выбора файла, по клику на которой появляется окно выбора файла:

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

Для начала добавим в html-код дополнительный элемент элемент div для вывода имени загружаемого файла и добавим обработчик на событие onchange :




Выберите файл


function getFileName () {
var file = document.getElementById ("uploaded-file").value;
file = file.replace (/\\/g, «/»).split ("/").pop ();
document.getElementById ("file-name").innerHTML = "Имя файла: " + file;
}

В результате получим такой вариант поля input file:

При выборе файла под кнопкой появляется текст с названием файла. Данный способ стилизации input file точно работает в браузерах IE9+, Chrome, Firefox, Mozilla и Opera. Кроме того многие браузеры позволяют получать размер и разрешение выбранного файла. Также можно сделать предпросмотр выбранного файла в случае если загружается картинка. Например, такой вариант:

Код к последнему примеру можно скачать по .

На этом все, до новых встреч!

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

Имя файла:

Загрузить файл

Здесь можно выделить две отдельные задачи. Первая – выполнить отправку формы сразу после выбора файла. Вторая – оформить компонент выбора файла в соответствии с дизайном в виде нестандартной кнопки.

Форма, для которой реализуем все описанные задачи, имеет следующий исходный код:


Имя файла:



и в начале выглядит так:

Имя файла:

Submit формы после выбора файла в input

Подобная задача рассматривалась в статье о перезагрузке и обновлении страницы выбором в select . Там так же использовалось событие компонента формы для отправки формы с помощью скрипта.

Выполнить отправку формы можно с помощью jQuery кода:

$("#ID_формы" ).submit();

Этот вызов нужно привязать к событию change (обновлению) компонента выбора файла input. В итоге код jQuery для решения нашей формы должен быть следующий:


jQuery(function(){
$("#myfile" ).change(function(){ // событие выбора файла
$("#myform" ).submit(); // отправка формы
});
});

Собственное оформление input средствами CSS

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

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

Одним из вариантов может быть снова применение jQuery. Но, на мой взгляд, если есть возможность обойтись без дополнительных скриптов, а использовать только теги HTML, то стоит делать без скриптов. И здесь нам на помощь приходит тег HTML label. В статье "Переключение radio кнопки и checkbox нажатием на подпись в HTML" уже описывалось его применение.

Здесь, подобным образом, тег компонента выбора файла обрамляется тегом label. В label так же добавим текст "Загрузить файл"


Имя файла:


Загрузить файл


Теперь остается только назначить стили для оформления имеющихся тегов. Компонент выбора файлов скрывается. Тегу label, придаем нужный внешний вид:


#myform p {
text-align : center;
margin : 10px 0;
}
#myform #myfile {
display : none;
}
#myform #mylabel {
background-color : #fd685b;
padding : 10px 20px;
color : #fff;
cursor : pointer;
}