Кроссбраузерная стилизация input type="file" с помощью CSS. CSS-селекторы, используемые для оформления. Модель по умолчанию

Здравствуйте уважаемые читатели блога сайт! Одной из самых сложных задач для верстальщика является стилизация элементов формы так, как видит их дизайнер. Тем более по умолчанию такие поля как 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;
}

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

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

Для решения задачи нам поможет тег 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 (очень частая проблема статичных сайтов). Решается следующим способом.

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

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

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

Пример опубликованный здесь демонстрирует как вариант один из решений, который позволяет стилизовать поле выбора файла. Делается это таким образом, в форме мы размещаем input file, а вместе с ним добавляем label. Input file мы скрываем, а вместо него делаем из label стилизованную кнопку (благо есть такая возможность). После чего, немного магии на javascript, и наш label будет уметь открывать форму выбора файла при клике. Далее по порядку.

Поля для стилизации input file:

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

Теперь, нам предстоит скрыть input file, чтобы в поле зрения оставался только label, который мы и будем стилизовать.

Скрываем input file:

Inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }

После этого, как на странице остался только label, приступаем к его стилизации.

Стилизуем label

Inputfile + label { font-size: 1.25em; font-weight: 700; color: white; background-color: black; display: inline-block; } .inputfile:focus + label, .inputfile + label:hover { background-color: red; }

Есть моменты, которые следовало бы отметить, что мы и сделаем. По умолчанию элемент label не кликабельный, а это значит, что курсор у него будет в виде стандартного указателя «стрелочки». Чтобы обозначить курсор кликабельным, добавляем так же параметр cursor со значением pointer.

Inputfile + label { cursor: pointer; }

Так же элемент label не выделяется клавиатурой tab, что привычно для обычных полей ввода на форме. Сделаем так, чтобы его можно было выделять посредством клавиатуры, таким же образом, как это можно сделать для стандартных полей ввода.

Inputfile:focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; }

Теперь что касается описания кнопки выбора файла. Сделаем так, чтобы при выборе одного файла кнопка отображала его имя, при выборе нескольких – показывалось общее количество файлов. Реакцию на выбор пользователя мы запрограммируем на javascript, а так же воспользуемся библиотекой JQuery.

Подготовим скрытое поле, для работы с ним:

Код Javascript:

Var inputs = document.querySelectorAll(".inputfile"); Array.prototype.forEach.call(inputs, function(input) { var label = input.nextElementSibling, labelVal = label.innerHTML; input.addEventListener("change", function(e) { var fileName = ""; if(this.files && this.files.length > 1) fileName = (this.getAttribute("data-multiple-caption") || "").replace("{count}", this.files.length); else fileName = e.target.value.split("\\").pop(); if(fileName) label.querySelector("span").innerHTML = fileName; else label.innerHTML = labelVal; }); });

Что делать, если javasvript отключен в браузере?
Редко, но случается, что в браузере может быть выключен код javascript, что делать в этом случае? Ничего не остается, кроме того, чтобы вернуть видимость скрытому полю выбора файла.

(function(e,t,n){var r=e.querySelectorAll("html");r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);

Дополнительный код в CSS:

Js .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .no-js .inputfile + label { display: none; }

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

Суть такого изменения в подмене нашего поля на новое. По сути такой же способ как я описывал недавно в статьях - и . И так не будем втягивать и приступим к нашей задаче.

Для начала нужна разметка HTML. У меня будет свой код, у вашей формы свой. Главное, вы должны заменить свое поле выбора файла на мое или подогнать свое под основные параметры моего. Обычное поле добавления файла выглядит примерно так:

У нас же будет иметь следующий вид:

Выберите файл Файл не выбран

Давайте немножко разберем, что и как.

• - заключаем все в блок контейнер. Условие обязательное. Присваиваем блоку класс fl_upld .
• Выберите файл - наше поле прикрепления файла заключаем в label. Это наш и идентификатор поля. Самому полю присваиваем id="fl_inp". Тоже важный момент. Ну и добавляем текст - Выберите файл . Этот текст будет на будущей кнопке.
• Файл не выбран - блок, который изначально выводит текст - Файл не выбран. После выбора файла вместо этого текста появится название файла. данному блоку присваиваем id="fl_nm". Забегу наперед, скажу, что если не будете подключать скрипт для вывода имени файла, то можете не добавлять данный блок. У вас будет просто кнопка без динамики.

Fl_upld{width:300px;} #fl_inp{display:none;} .fl_upld label{ cursor:pointer; background:#36c; border-radius:3px; padding:10px 25px; color:#fff; font-weight:bold; text-align: center; } .fl_upld label:hover{background:#fc0;} #fl_nm{ margin-top:20px; color:#f00;}

Быстро расскажу, что за что отвечает.

• Для контейнера fl_upld устанавливаем ширину в 300px. Если это поле будет внутри вашей формы, у которой будет ширина, то в принципе можно эту строчку не писать и ширину не задавать.
• #fl_inp{display:none;} - скрываем наше стандартное поле прикрепления файла. Это важный и единственный главный параметр.
• Далее для .fl_upld label - пишем параметры. Идентификатор и станет нашей кнопкой. Прописываете все что хотите, чтобы сделать кнопку нужного вида.
• .fl_upld label:hover{background:#fc0;} - стили для кнопки. кола на нее наводишь курсор. У нас она просто становится желтой.
• Ну и напоследок для #fl_nm блока названия файла тоже добавляем параметры.

Вот и все стили, конечно же как и всегда можете менять их как угодно и подгонять под себя. Главный параметр - это скрыть стандартное поле. #fl_inp{display:none;}

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

}