Все преобразование мы совершим с помощью стилей 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 , сначала нужно подключить библиотеку. если это уже сделано делать этого не нужно.

;

if (file ) {

var file_size = 0 ;

if (file . size > 1024 * 1024 ) {

file_size = (Math . round (file . size * 100 /(1024 * 1024 ))/ 100 ). toString () + "MB" ;

else {

file_size = (Math . round (file . size * 100 / 1024 )/ 100 ). toString () + "KB" ;

document . getElementById ("file_name" ). innerHTML = "Name: " + file . name ;

document . getElementById ("file_size" ). innerHTML = "Size: " + file_size ;

catch(e ) {

var file = document . getElementById ("uploaded_file" ). value ;

file = file . replace (/\\/ g , "/" ). split ("/" ). pop ();

document . getElementById ("file_name" ). innerHTML = "Name: " + file ;

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

Готовый пример формы со стилизованным полем выбора файла и его обработкой, вы можете посмотреть на

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

Год за годом не достаточно детализированная спецификация заставляла веб- разработчиков экспериментировать в попытках привести представление таких элементов, как input , select , fieldset , legend и textarea в разных браузерах к «общему знаменателю». В этой статье мы рассмотрим некоторые приемы CSS, используемые веб-разработчиками для стандартизации визуального представления элементов форм.

Тесты Роджера Йоханссона

Сначала в 2004, а затем и в 2007 году, Роджер Йоханссон (Roger Johansson) создал исчерпывающий набор тестов для проверки применения CSS-стилей к элементам форм. Результатом выполнения этих тестов, которые вы можете найти в его статье «К вопросу о стилизации элементов форм с помощью CSS », стал неутешительный вывод, который Йоханссон выразил следующими словами:

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

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

Модель по умолчанию

Спецификация CSS 2.1 указывает в предлагаемой таблице стилей по умолчанию для HTML4 , что элементы форм, такие как textarea , input и select , являются строчно-блочными:

textarea , input , select { display : inline-block; }

В свою очередь, элементы form и fieldset являются блочными:

fieldset , form { display : block; }

Описание модели, предлагаемой спецификацией CSS по умолчанию, этим и ограничивается. Все остальные визуальные аспекты элементов форм зависят от таблицы стилей браузера, применяемой по умолчанию . Тем не менее, перечисленные правила означают следующее:

Строчно-блочные элементы могут быть стилизованы с использованием строчной модели. Он позволяет использовать такие CSS-свойства, как line-height и vertical-align , для управления высотой блока и его вертикальным выравниванием. Кроме этого, для указания внешних и внутренних отступов блока могут быть применены свойства margin и padding . Строчно-блочные элементы поддерживают width и height , так как используют блочную модель форматирования.

Блочные элементы могут быть стилизованы с использованием хорошо всем известного блочной модели. Тем не менее, проблемы возникают с элементами fieldset и legend , так как 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; }

После определения гарнитуры можно задать padding для добавления внутренних отступов блоку элемента:

input , select { width : 120px ; font : 1em Arial, sans-serif; padding : 3px 6px ; }

Для элементов input и textarea в таблицах стилей браузеров определен border . Нормализуем его:

input , input , textarea { border : 1px solid #ccc ; }

Элементам input с типом button и submit браузеры добавляют дополнительный отступ. Распространенная практика их нормализации:

input , input { padding : 2px ; }

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

padding используется также и для элементов fieldset и legend , но приводит к другим результатам:

• Установка значения свойства padding для элемента fieldset в 0 по умолчанию сбросит отступ элемента legend в некоторых браузерах (но не в IE).
• Установка значения свойства padding для элемента legend в 0 приведет к его схлопыванию.

Для select , и для input c типами checkbox и radio стоит использовать только:

• font-family ,
• font-size ,
• width (для select),
• padding .

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

Выравнивание

Элементы форм можно выровнять по горизонтали и по вертикали. Они могут быть расположены на одной линии или как группа блоков друг под другом. Для выравнивания их на одной линии вы можете использовать один из двух подходов:

Использовать float ,

Использовать для некоторых элементов строчно-блочную модель.

При использовании float элементы автоматически становятся блочными. Это означает, что эти элементы форм теперь подчиняются девяти правилам float-элементов .

Элементы форм можно выравнивать по вертикали и по горизонтали.

При использовании float основной проблемой является правильное выравнивания по вертикали относительно текущей строки. Обычно это делают используя margin или padding:

input , select { width : 120px ; float : left; margin-top : 0.4em ; }

Этот подход работает, когда вам не нужно задавать выравнивание блоков относительно текста, например, содержимого label . В случае, если это необходимо, вы можете использовать относительное позиционирование, padding и margin для элементов, содержащих только текст:

label { float : left; padding-top : 0.4em ; width : 5em ; margin-right : 1em ; }

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

input { float : left; width : 90px ; position : relative; top : 0.4em ; }

Еще прием с относительным позиционированием можно использовать для input с типами checkbox и radio . Относительное позиционирование можно использовать даже для нормализации отступа слева у элемента legend внутри элемента fieldset . Единственное отличие состоит в необходимости использования свойства left вместо top .

При использовании строчной и строчно-блочной модели для вертикального выравнивания элементов вы можете использовать свойство 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 для родительского элемента, чтобы выровнять элементы по правому краю, по левому краю или по центру.

Странные особенности элементов выбора файлов

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

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

Веб-разработчики, тем не менее, быстро нашли способ преодолеть эти ограничения. Сначала они поместили поле ввода в контейнер:

Затем они скрыли элемент input с помощью свойства 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 . Это предпочтительный способ для переопределения стилей браузера по умолчанию.

Заключение

Полноценное управление представлением элементов форм невозможно ввиду отсутствия определенности в спецификации CSS и из-за стилей, применяемых браузерами по умолчанию. Тем не менее, используя некоторые общепринятые приемы, можно сократить различия в оформлении элементов (но не избавиться от них).

Оригинальная статья: The Problem Of CSS Form Elements Статью вычитывали: , visitorFM , Anton Khlynovskiy , Igor Adamenko