Стилизация стандартного поля выбора файла в 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)
|
| Просмотров: 4384 | Рейтинг: 0.0/0
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
