Изображения и фоновые рисунки позволяют легко изменить вид текстовых полей и кнопок для отправки формы на сервер. Как обычно, вначале требуется нарисовать желаемые элементы в графическом редакторе (рис. 1), а затем сделать отдельные изображения для каждого поля.
Рис. 1. Форма с нестандартными элементами
Начнём с однострочного текстового поля. Размеры картинки получились 328х46 пикселов, эти значения укажем в качестве ширины и высоты. Саму картинку ставим фоном с помощью свойства background . Изначально у текстового поля отображается рамка, чтобы она не портила вид её необходимо спрятать, задав свойство border со значением none (пример 1).
Пример 1. Текстовое поле
Текстовое поле .user { width: 308px; /* Ширина поля с учетом padding */ height: 46px; /* Высота */ background: #dad7c5 url(images/input.png) no-repeat; /* Фон */ padding: 0 10px; /* Поля */ border: none; /* Убираем рамку */ font-size: 1em; /* Размер текста */ line-height: 46px; /* Выравниваем по центру в IE */ }
Наше поле по высоте получается довольно большим по сравнению с полем по умолчанию, из-за этого возникают проблемы с выравниванием текста по центру в IE. Он будет выводиться по верхнему краю поля, что выглядит довольно небрежно. Для выравнивания используем свойство line-height со значением равным высоте поля заданным через height . На остальные браузеры это дополнение не окажет влияния, поэтому условными комментариями можно пренебречь.
Для многострочного текстового поля установка фона происходит аналогично. Но есть небольшое отличие - с правой стороны имеются кляксы, если мы вставим картинку фоном для , то при появлении вертикальной полосы прокрутки она будет выводиться прямо по кляксам. При этом теряется эффект рамки. Поэтому фон добавим для блочного элемента, а выведем уже в нём (пример 2).
Сюда же вставим и рисованную кнопку для отправки файла. Это делается через , в атрибуте src указываем путь к файлу, остальное браузер берет на себя.
Пример 2. Поле для ввода текста
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Текстовое поле .comment { width: 347px; /* Ширина рисунка */ height: 176px; /* Высота рисунка */ background: #dad7c5 url(images/textarea.png) no-repeat; /* Фон */ } .comment textarea { border: none; /* Убираем рамку */ background: transparent; /* Прозрачный фон */ margin: 3px; /* Отступы от линии */ width: 318px; /* Ширина поля */ padding: 5px 0 5px 5px; /* Поля в тексте */ height: 160px; /* Высота */ }
По умолчанию текстовое поле имеет белый цвет фона, что нам совершенно не требуется, поэтому в свойствах задаём его прозрачным через значение transparent .
Браузеры несколько по-разному выводят полосу прокрутки, но эти изменения не настолько существенны, чтобы придавать им значение. К примеру, вид формы в Opera показан на рис. 2.
Рис. 2. Поле для ввода текста
В браузерах примеры отображаются корректно, только следует учесть два момента.
Изучая html мы создавали формы с помощью тегов , а внутри создавали необходимое количество и .
Оформление поля inputДля того чтобы задать свойство для элемента формы нам необходим селектор. Этим селектором могут выступать такие теги как input (в этом случае как вы уже знаете мы зададим стиль для всех input-ов), textarea или селектор class . Рассмотрим на примере «для всех полей input зададим фон голубой, цвет букв синий и рамку синего цвета». Для работы возьмем следующую форму:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | Главная Введите Ваше имя: Введите Вашу фамилию: Расскажите немного о себе: |
И для того чтобы преобразить данную форму используем следующий CSS код:
Как это выглядит в браузере:
Я думаю объяснять всё подробно нет необходимости. Но заострю лишь внимание на моменте, где мы указываем селектор. Мы написали селектор «input» — а это значит что данный стиль применится для всех полей на странице. Если вы хотите задать какому-то определенному полю стиль, необходимо прописать ему в html атрибут class=" " и вписать свойство в CSS.
Оформление поля textareaТакже мы можем оформить по своему желанию текстовую область — textarea. Как вы уже догадались это можно сделать также двумя способами. При оформлении текстовой области в этом уроке мы воспользуемся вторым способом через атрибут class=" " . Мы имеем html страницу, которая была в начале урока. Присвоим для текстовой области атрибут class="niceText" :
| 1 |
Затем на фон установим изображение и выделим текстовую область синей рамкой:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | input{ background-color : #D3D5FF ; /* голубой фон */ color : #0007D3 ; /* синий цвет букв */ padding : 5px ; /* внутренний отступ для текста в 5 пикселей */ } .niceText{ background-image : url ("about.png" ) ; /* изображение для заднего фона */ background-repeat : no-repeat ; /* запрещаем повтор фонового изображения */ background-position : 100% 100% ; /* смещаем его в правый нижний угол */ border : 2px solid #7A7DD6 ; /* синяя рамка в два пикселя */ } |
Как это выглядит в браузере:
И последнее что мы рассмотрим в этом уроке это изображение вместо простой кнопки. Возьмем следующий код html:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Главная Введите Ваше имя: Введите Вашу фамилию: Расскажите немного о себе: |
И применим следующие свойства CSS.
Недавно столкнулся с интересной задачей: на странице нужно разместить пользовательскую форму, в которой было несколько полей для ввода данных и поле для выбора файла. Причем, кнопка выбора файла сделана именно как красивая кнопка, а не стандартный компонент input. А отправка этой формы, в соответствии с техническим заданием, должна выполняться сразу после выбора файла. В итоге должна получится подобная пользовательская форма:
Имя файла:
Загрузить файл
Здесь можно выделить две отдельные задачи. Первая – выполнить отправку формы сразу после выбора файла. Вторая – оформить компонент выбора файла в соответствии с дизайном в виде нестандартной кнопки.
Форма, для которой реализуем все описанные задачи, имеет следующий исходный код:
Имя файла:
и в начале выглядит так:
Имя файла:
Submit формы после выбора файла в inputПодобная задача рассматривалась в статье о перезагрузке и обновлении страницы выбором в select . Там так же использовалось событие компонента формы для отправки формы с помощью скрипта.
Выполнить отправку формы можно с помощью jQuery кода:
$("#ID_формы" ).submit();
Этот вызов нужно привязать к событию change (обновлению) компонента выбора файла input. В итоге код jQuery для решения нашей формы должен быть следующий:
jQuery(function(){
$("#myfile"
).change(function(){
// событие выбора файла
$("#myform"
).submit();
// отправка формы
});
});
Сложность этой задачи заключается в отсутствии стандартов оформления компонента. В различных браузерах он отображается его по-разному. А 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;
}
До появления CSS2 в 1998 году, элементы форм уже активно поддерживались различными браузерами. Однако ни тогда, ни сейчас не был определён единый стиль отображения данных элементов. В результате, до сих пор элементы форм перенимают стили браузера.
Идут года, веб-разработчики пытаются решить эту проблему, возникшую из-за отсутствия чёткой CSS спецификации в отношении элементов форм, и добиться кроссбраузерного отображения таких элементов, как input, select, fieldset, legend и textarea. В этой статье мы пробежимся по некоторым CSS рецептам, предназначенным для унификации отображения элементов форм.
Тесты Роджера ЙоханссонаВ 2004 и 2007 годах, Роджер Йоханссон создавал специальные наборы тестов. В конце он пришёл к выводу, что с помощью CSS невозможно стилизовать формы под все браузеры и платформы. Также его анализ выявил, что многие браузеры игнорируют некоторые CSS стили.
Несмотря на его выводы, веб-разработчики продолжили поиск идеального или хотя бы компромиссного решения проблемы отображения собственных стилей на разных браузерах и платформах.
Стандартная модельВ спецификации CSS 2.1 было определено, что элементы форм textarea, input и select будут обладать характеристиками как блочных, так и строчных элементов (inline-block):
Textarea, input, select { display: inline-block; }
В свою очередь, элементы form и fieldset обладают характеристиками только блочных элементов (block):
Fieldset, form { display: block; }
На этом CSS спецификация данных элементов заканчивается. Все остальные аспекты оформления ложатся на плечи браузеров.
К элементам, обладающим как блочными, так и строчными характеристиками могут быть применены CSS свойства такие как line-height и vertical-align, для контроля высоты контейнера и выравнивания по вертикали. Также им доступны и другие характеристики, такие как внешние и внутренние отступы, а также свойства ширины и высоты.
Однако попытки оформить такие элементы, как fieldset и legend, вызывают различного рода сложности из-за стандартных стилей браузеров.
Как же решить данную проблему?
Определение размеровСо временем, веб-разработчики заметили, что браузеры начинают неправильно отображать некоторые элементы форм, если им задать размеры:
Input, select { width: 120px; height: 32px; }
Многие пытались, превратить данные элементы в блочные:
Input, select { width: 120px; height: 32px; display: block; }
Однако, результаты оставляли желать лучшего. Только элемент textarea не вызывала проблем. Решение родилось некоторое время спустя, когда вместо свойства height стали использовалось сочетание свойств font-size и padding.
Также, браузеры различным образом отображают размер текста и шрифтов. Это легко исправить, задав следующие настройки:
Input, select { width: 120px; font: 1em Arial, sans-serif; }
Input, select { width: 120px; font: 1em Arial, sans-serif; padding: 3px 6px; }
Затем можно оформить и внешнее оформление элементов input и textarea:
Input, input, textarea { border: 1px solid #ccc; }
Элементам input типа button и submit браузеры приписывают дополнительный внутренний отступ. Нормализовать это можно следующим образом:
Input, input { padding: 2px; }
Также, можем применить специальные браузерные префиксы. К примеру, для браузеров, работающих на webkit, можно написать следующие стили:
Input, input, input, input::-webkit-file-upload-button, button { -webkit-box-align: center; text-align: center; cursor: default; color: buttontext; padding: 2px 6px 3px; border: 2px outset buttonface; border-image: initial; background-color: buttonface; box-sizing: border-box; } input, input, input { -webkit-appearance: push-button; white-space: pre; }
Внутренние отступы также можно применить к элементам fieldset и legend, но учитывая некоторые особенности:
Если поставить внутренним отступам элемента fieldset значение 0, то в некоторых браузерах это может привести к потере отступов элементов legend (не в IE);
Если поставить внутренним отступам элемента legend значение 0, то эти элементы станут слишком сжаты.
Нормализовать и унифицировать отображение чек боксов, радио кнопок и селект боксов можно, задав следующие свойства:
Применяя данные правила к рассмотренной группе элементов, можно добиться одинаково отображаемого контента на разных браузерах.
ВыравниваниеЭлементы форм можно выравнивать как по вертикали, так и по горизонтали. Для того чтобы располагать элементы на одной строке с другими элементами, применяйте:
Применяя float главной проблемой становится вертикальное выравнивание. Решение заключается в применении внутренних или внешних верхних отступов:
Input, select { width: 120px; float: left; margin-top: 0.4em; }
Этот способ подходит, если нам необходимо выровнять блоки с текстом. Если же мы хотим создавать формы с элементами label, то нужно применить ещё одно правило:
Также проблема отображения возникает и у кнопок. Если высота вашей кнопки больше высоты рядом стоящих элементов, то выравнять её вертикально можно, добавив position: relative:
Input { float: left; width: 90px; position: relative; top: 0.4em; }
Данный подход также пригоден для чекбоксов и радио кнопок. Также его можно применить и для элемента legend с внутренними fieldset, изменив только одно: top на left.
Если мы имеем дело со строчными элементами, то вертикальное выравнивание применяется добавлением свойства vertical-align:
Label, input { vertical-align: middle; margin-right: 1em; }
Также неплохо скомбинировать данный подход с добавлением line-height. Однако его нужно добавлять к родительскому элементу. Если применить данное свойство непосредственно к какому-то элементу, то его высота может увеличиться.
Form-row { line-height: 1.4; }
Этого можно избежать, задав конкретную высоту:
Form-row { line-height: 1.8; height: 1.8em; }
Также строчным элементам можно задать выравнивание с помощью свойства text-align.
Проблемы с элементами загрузки файловВ отношении элементов загрузки файлов нужен совершенно другой подход. В целях безопасновти, данные элементы всегда должны быть видимы и узнаваемы. Именно поэтому браузеры часто просто игнорируют наши попытки оформить эти элементы, применяя стандартные стили.
Более того, разные браузеры по-разному отображают даже и этот элемент. Где-то он представлен просто в виде кнопки, где-то - с текстовым полем.
Однако веб-разработчики и тут нашли лазейку. Во-первых, данный элемент нужно поместить в блок div:
Скрытие элемента загрузки файла осуществляется путём применения свойства opacity. Далее можно колдовать с собственными стилями:
Upload { width: 157px; height: 57px; background: url(upload.png) no-repeat; overflow: hidden; } .upload input { display: block !important; width: 157px !important; height: 57px !important; opacity: 0 !important; overflow: hidden !important; }
Обратите внимание на запись!important. Это лучший способ заменить стандартные стили браузера.
ЗаключениеДа, стандартные стили браузеров зачастую делают невозможным одинаково отображать элементы форм на разных браузерах. Однако, применяя данные правила, мы можем если не свести к нулю все проблемы, то хоть в значительной мере улучшить ситуацию.
Уже немало копий front-end разработчиков было сломано об проблему стилизации поля ввода input . Суть проблемы заключается в том, что в спецификации HTML нет строгих правил, устанавливающих, как же должен отображаться браузером этот элемент. Более того, для input не предусмотрено атрибутов, которые позволили бы изменить его внешний вид, с помощью стилей CSS можно изменить лишь вид его границы и шрифт, а средствами JavaScript, из соображений безопасности, нельзя сымитировать клик по этому элементу, который вызвал бы системное окно для выбора файла * . Но что же делать, когда заказчик хочет адаптивный сайт с красивыми стилизованными формами, в которых нельзя обойтись без этого поля ввода?
* - на момент написания этой статьи, мне было еще неизвестно, что уже во всех современных браузерах имитация клика по input вызывает системное окно выбора файла. Большое спасибо lutov за ценный комментарий с ссылкой на рабочий пример от Pagefest !
Способы решения проблемы стилизации поля За то время, сколько существует эта проблема (а существует она очень долго), было найдено несколько способов ее решения. Всего их существует пять:Способ №1 (самый распространенный)Убедить заказчика, что можно жить и со стандартным input .Способ №2Написать/использовать готовый загрузчик файлов на Flash/Java-апплете. Используется, например, на habrastorage.org Способ №3 (будет рассмотрен в статье)Средствами CSS «замаскировать» стандартный input , сделать его полностью прозрачным и поместить на месте стилизованного фейкового поля, чтобы клик по последнему вызывал клик по стандартному, и, как следствие, открывал системное окно выбора файла.Способ №4 new! (будет рассмотрен в статье) Поместить прозрачный input внутрь элемента label, вместе с произвольными стилизованными инлайновыми элементами (кроме input, button, select и textarea, разумеется). Клик по label автоматически приведет к клику и по скрытому полю для выбора файла. Спасибо lampa за ценный комментарий !Способ №5 new! (будет рассмотрен в статье)Использовать имитацию клика по скрытому input средствами JavaScript. Да, это уже работает во всех современных браузерах. Еще раз спасибо lutov за ценный комментарий !У всех четырех последних способов, разумеется, есть свои минусы. Существенный недостаток Flash/Java-решения в том, что для его работы нужны соответствующие плагины, которых в браузере пользователя может не оказаться. Большой недостаток «маскировочного» решения же заключается в том, что для его реализации необходимо использовать хаки (про это речь пойдет ниже), а также потому, что оно бессмысленно без использования JavaScript (ведь нужно же как-то различать состояния «файл не выбран» и «файл выбран» для стилизованного фейкового поля, что на одном CSS сделать невозможно). Решение на JavaScript, в целом, было бы очень хорошим, но, как оказалось на практике, оно не поддерживается браузером Internet Explorer, о чем было сказано выше. Минус решения с использованием label - все то же использование JavaScript, однако, оно гораздо лучше «маскировочного» способа и должно, на мой взгляд, использоваться сейчас для решения этой острой проблемы.
Схема велосипеда Ключевой задачей было поставлено создание «резинового» input , который на экранах мобильных устройств представлял бы из себя простую кнопку для выбора файла (имя выбранного файла выводится на ней же), а на широких экранах выглядел бы как привычное для всех текстовое поле + кнопка, которое может тянуться на всю ширину окна:Схематический вид элемента на мобильных устройствах
Схематический вид элемента на десктопных устройствах
В статье будут рассмотрены три последних способа стилизации поля выбора файла. Таким образом, с учетом оговоренной выше схемы, исходная верстка для «маскировочного» способа №3 будет иметь следующий вид (порядок дочерних элементов важен!):
Выбрать Файл не выбран
Возможная верстка для способа с применением элемента label:
Выбрать
Файл не выбран
Возможная верстка для решения на JavaScript (совпадает с версткой для «маскировочного» способа):
Выбрать
Файл не выбран
/* example */
Договорились? Отлично! Начнем стилизовать наше фейковое поле выбора файла с его «обертки» - div.file_upload :
File_upload{
position: relative;
overflow: hidden;
font-size: 1em; /* example */
height: 2em; /* example */
line-height: 2em /* the same as height */
}
- свойство position задается для того, чтобы относительно div.file_upload
можно было абсолютно позиционировать его дочерние элементы, а свойство overflow - для того, чтобы скрывать все то, что по каким-то причинам не влезет в нашу обертку (а такое найдется, но об этом позже). На широких экранах наши красивые поле и кнопка должны отображаться в одну строку - зададим для последней фиксированную ширину и float: right, а для первого - небольшой внутренний отступ:
File_upload > button{
float: right;
width: 8em; /* example */
height: 100%
}
.file_upload > div{
padding-left: 1em /* example */
}
Поскольку мы хотим, чтобы на мобильных устройствах текстовое поле скрывалось, и оставалась одна кнопка выбора файла, необходимо задать media query
:
@media only screen and (max-width: 500px){ /* example */
.file_upload > div{
display: none
}
.file_upload > button{
width: 100%
}
}
Ну а теперь - самое веселое в данном методе! Необходимо сделать стандартный input
полностью прозрачным, и растаращить растянуть его до размеров «обертки» div.file_upload
. Для реализации последнего применим хак в виде абсолютного позиционирования и свойства CSS 3 transform , с помощью которого увеличим элемент, например, в 20 раз (да, это самое обычное «магическое число»):
.file_upload input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(20);
letter-spacing: 10em; /* IE 9 fix */
-ms-transform: scale(20); /* IE 9 fix */
opacity: 0;
cursor: pointer
}
Как видно из приведенного выше фрагмента CSS, для IE 9 потребовались дополнительные костыли. Это связано с тем, что данный браузер при клике на текстовое поле не вызывает системное окно выбора файла, а любезно предлагает «стереть» имя уже выбранного, что символизируется мигающим текстовым курсором. Поэтому для него дополнительно задается огромный интервал между буквами, что увеличивает кнопку элемента до размеров div.file_upload
. Отмечу также, что z-index в данном случае не указывается, т.к. элемент идет последним «потомком» в выбранной с самого начала разметке.
На примере десктопного браузера FireFox, сейчас наше кастомизированное поле выбора файла для разных размеров окна выглядит так:
File_upload{
display: block;
position: relative;
overflow: hidden;
font-size: 1em; /* example */
height: 2em; /* example */
line-height: 2em /* the same as height */
}
.file_upload .button, .file_upload > mark{
display: block;
cursor: pointer /* example */
}
.file_upload .button{
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 8em; /* example */
height: 100%;
text-align: center /* example */
}
.file_upload > mark{
background: transparent; /* example */
padding-left: 1em /* example */
}
Однако, теперь уже нет необходимости использовать хак с «растягиванием» прозрачного input
:
File_upload input{ position: absolute; top: 0; opacity: 0 }
«Как это работает?» или стили для решения на JavaScript Поскольку исходная верстка для данного способа была выбрана такой же, как и в «маскировочном», стили для кнопки и текстового поля для обоих способов также совпадают (за исключением, разве что, свойства cursor: pointer , которое, в данном случае, будет применяться к кнопке и текстовому полю). Стиль же input можно взять тот же, что использовался в методе c применением элемента label, но в нем лучше вместо свойства opacity использовать visibility:File_upload input{ position: absolute; top: 0; visibility: hidden }
Нужно больше стилей! Разумеется, в таком примитивном виде поле выбора файла вряд ли кого-то устроит, поэтому добавим дополнительные стили, которые сделают кнопку выбора файла, скажем, фиолетовой, добавят тени и т.д. Не забудем также добавить свой стиль для кнопки, когда на нее наведен курсор, стиль для нажатой кнопки, а еще добавим стиль для всего элемента, когда на нем находится фокус (будет применяться при помощи JavaScript):/* Making it beautiful */ .file_upload{ border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 0 5px rgba(0,0,0,0.1); transition: box-shadow 0.1s linear } .file_upload.focus{ box-shadow: 0 0 5px rgba(0,30,255,0.4) } .file_upload > button{ background: #7300df; transition: background 0.2s; border: 1px solid rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); color: #fff; text-shadow: #6200bd 0 -1px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .file_upload:hover > button{ background: #6200bd; text-shadow: #5d00b3 0 -1px 0 } .file_upload:active > button{ background: #5d00b3; box-shadow: 0 0 3px rgba(0,0,0,0.3) inset }
Теперь наше поле выбора файла выглядит так:
Var wrapper = $(".file_upload"),
inp = wrapper.find("input"),
btn = wrapper.find("button"),
lbl = wrapper.find("div");
btn.focus(function(){
inp.focus()
});
// Crutches for the:focus style:
inp.focus(function(){
wrapper.addClass("focus");
}).blur(function(){
wrapper.removeClass("focus");
});
Для метода с использованием label можно убрать участок кода, отвечающий за принудительный перенос фокуса с кнопки на input
(т.к. там у нас и не кнопка вовсе, а span).
Для метода, суть которого заключается в имитации клика по input , нужно, собственно, добавить эту самую имитацию:
// Yep, it works!
btn.add(lbl).click(function(){
inp.click();
});
а также скорректировать код для установки класса .focus
, предварительно убрав фрагмент, отвечающий за принудительный перенос фокуса:
// Crutches for the:focus style:
btn.focus(function(){
wrapper.addClass("focus");
}).blur(function(){
wrapper.removeClass("focus");
});
Поле ввода до сих пор оставалось «мертвым» - при выборе файла имя последнего нигде не отображалось. Пришло время исправить и это:
Var file_api = (window.File && window.FileReader && window.FileList && window.Blob) ? true: false;
inp.change(function(){
var file_name;
if(file_api && inp[ 0 ].files[ 0 ])
file_name = inp[ 0 ].files[ 0 ].name;
else
file_name = inp.val().replace("C:\\fakepath\\", "");
if(! file_name.length)
return;
if(lbl.is(":visible")){
lbl.text(file_name);
btn.text("Выбрать");
}else
btn.text(file_name);
}).change();
- если браузер поддерживает File API, то имя файла определяется с помощью него, в противном случае оно вырезается из значения скрытого input
. Для мобильных устройств, когда элемент представляет из себя одну кнопку, имя выбранного файла выводится на ней же.
Казалось бы, все, что требуется, уже написано. А вот фигушки! Если выбрать файл, используя «мобильное» поле, а затем увеличить размер окна и перевести элемент в «десктопный», то в текстовом поле так и останется «Файл не выбран» - нужно каждый раз обновлять элемент при изменении размеров окна:
$(window).resize(function(){
$(".file_upload input").triggerHandler("change");
});
Из плюсов всех рассмотренных в статье подходов можно выделить следующие основные:
Из основных минусов:
Какой из трех двух элегантных способов создания стилизованного input выбрать для повседневного использования - решать вам. Мой выбор - способ с использованием label (хоть он и имеет несемантичную верстку).
Рабочие примеры всех трех способов можно посмотреть на CodePen.
