Стилизация стандартного поля выбора файла в CSS - Каталог статей - Уроки по html/css - Разное www.Sefirut.ru - разработка шаблонов, сайтов, иконок, скриптов, создание сайтов набережные челны, студия веб-дизайна в Набережных Челнах, раскрутка и продвижение сайтов в интернете
| Сегодня Суббота 10.12.2016

Стилизация стандартного поля выбора файла в CSS


Стилизация стандартного поля выбора файла в CSS
Были ли у вас случаи, когда дизайнер нарисовал элемент формы для выбора файла, отличный от стандартного, и заказчик требует 100% соответствия? Нет? Тогда вам пока повезло!
Дело в том, что поле выбора файла для загрузки <input type="file" ... /> практически не поддается стилизации через CSS. Т.е мы можем изменить только значения вроде обрамляющей рамки, размера шрифта, и практически всё.
Этот элемент формы идет уже «склеенный» вместе с кнопкой «Choose file» (открывающей окно выбора файла), вид этого поля также различается практически во всех браузерах, а текст в кнопке по всей видимости, зависит также от языка в системе.
Так вот, немного поразмыслив, и «взвесив» всё, что мы имеем в арсенале CSS, выход всё-таки нашелся! И главное ключевое звено в нём — прозначность (opacity), которая фактически кроссбраузерна.
Если мы выставляем прозрачность в ноль, то элемента не видно на странице, но по нему всё еще можно кликнуть, укусить, пощупать. Т.е он остается полноценным функциональным узлом на странице.

Таким образом, совершая нехитрые манипуляции и ритуальный танец с бубном с позиционированием элементов, размером шрифта в поле выбора файла и кое-какими другими свойствами CSS мы можем добиться желающего.
Что нам еще понадобиться: одна штука <input type="text"> (но подойдет и любой другой элемент для информирования о выбранном файле), кнопка для открытия окна выбора файла (в примере <input type="button">) и непосредственном сам элемент <input type="file">.

Что же мы со всем этим делаем? Коротко говоря:

создаем один родительский контейнер с position:relative (чтобы выравнивать относительно него блоки с асболютным позиционированием)

распологаем информационное поле ввода по всему блоку (input type="text")

объединяем еще в один контейнер поля ввода (кнопку и выбор файла), выставляем ему тоже position:relative и сдвигаем его за пределы основного блока вправо, на значение собственной ширины (+ отступ)

для поля ввода type="file" выставляем кросс-браузерную прозрачность и огромный шрифт (чтобы увеличить размер самой кнопки элемента, по клику которой открывается окно для выбора файла), выставляем асболютное позиционирование для элемента и помещаем его «вверх и вправо» (относительно контейнера <span class="file">)

вешаем обработчик события в Javascript «onchange» на настоящее поле ввода (которое прозрачно), для того, чтобы можно было после выбора файла информировать о том, что за файл был выбран, в любой другой элемент на странице (в данном случае input type="text")


Всё что было сказано выше на словах, переведено ниже в HTML/CSS код и отлично, кроссбраузерно работает:

<style type="text/css">

.attach { position:relative; width:400px; height:30px; }

.attach #file_fake { width:100%; height:85%; cursor:default; color:gray; //padding:2px 0; }

.attach span.file { position:absolute; right:-125px; top:0; width:115px; height:100%; overflow:hidden; }

.attach span.file * { cursor:pointer; }

.attach span.file:hover * { color:gray; }

.attach input.file_select_btn { overflow:visible; width:100%; height:100%; }

.attach input.file_select { position:absolute; font-size:150px; right:0; top:0; opacity:0; -moz-opacity:0; filter:alpha(opacity=0); }

</style>



<div class="attach">

<input id="file_fake" type="text" readonly="readonly" value="Тут будет имя выбранного файла" />

<span class="file" title="Выбрать файл">

<input type="file" name="attach" class="file_select" onchange="document.getElementById('file_fake').value = this.value">

<input type="button" class="file_select_btn" value="Выбрать файл" title="Вместо этого элемента вы можете подставить любой другой" />

</span>

</div>
Категория: Разное | Добавил: Admin (10.10.2010)
Просмотров: 2455 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]