Рейтинг 4.4 из 5. Голосов: 7

form style

В этом материале пойдет речь о том как кастмизировать поле ввода file в формах. Эти поля обычно во всех броузерах выглядят по разному. Для того чтобы привести все к единому дизайну мы изменим основной атрибут тега -  определяющий вид элемента — type.

Это один из из разносторонних элементов формы, и он позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем:

<input type="" />

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

Можно задавать и настраивать следующие элементы формы:

  • текстовое поле (text),
  • поле с паролем (password),
  • переключатель (radio),
  • флажок (checkbox),
  • скрытое поле (hidden),
  • кнопка (button),
  • кнопка для отправки формы (submit),
  • кнопка для очистки формы (reset),
  • поле для отправки файла (file),
  • кнопка с изображением (image).

type="file" определяет поле для ввода имени файла, который пересылается на сервер.

У браузеров нет единых стандартов, как отображать этот элемент по умолчанию.

<input id="upload" name="upload" type="file" />

Так он выглядит в Internet Explorer 11:

ie11

А так - в Firefox 47:

firefox47

В Google Chrome:

chrome52

В Safari:

safari

Как же привести их к одному дизайну, чтоб во всех браузерах форма выглядела одинаково?

Для этого нам на помощь прийдет html+css. В то место, где должно быть поле выбора файла, вставим следующий код:

 
<div class="fileform">
<div id="fileformlabel"> </div>
<div class="selectbutton">Обзор</div>
<input name="upload" id="upload" onchange="getName(this.value);" type="file" />
</div>
 

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

.fileform { 
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 2px;
cursor: pointer;
height: 26px;
overflow: hidden;
padding: 2px;
position: relative;
text-align: left;
vertical-align: middle;
width: 230px;
}
 
.fileform .selectbutton { 
background-color: #A2A3A3;
border: 1px solid #939494;
border-radius: 2px;
color: #FFFFFF;
float: right;
font-size: 16px;
height: 20px;
line-height: 20px;
overflow: hidden;
padding: 2px 6px;
text-align: center;
vertical-align: middle;
width: 50px;
}
 
.fileform #upload{
position:absolute; 
top:0; 
left:0; 
width:100%; 
-moz-opacity: 0; 
filter: alpha(opacity=0); 
opacity: 0; 
font-size: 150px; 
height: 30px; 
z-index:20;
}
.fileform #fileformlabel { 
background-color: #FFFFFF;
float: left;
height: 22px;
line-height: 22px;
overflow: hidden;
padding: 2px;
text-align: left;
vertical-align: middle;
width:160px;
}
 

Теперь во всех браузерах поле формы выглядит одинаково.

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

function getName (str){
if (str.lastIndexOf('\\')){
var i = str.lastIndexOf('\\')+1;
}
else{
var i = str.lastIndexOf('/')+1;
}            
var filename = str.slice(i);      
var uploaded = document.getElementById("fileformlabel");
uploaded.innerHTML = filename;
}
 

Теперь поле формы выглядит так (При этом можно менять его размер, цвет, шрифт и выравнивание):

form

htmlПосмотреть пример... zipСкачать файл889 Байт

e-max.it: your social media marketing partner
Просмотров: 1520 Печать Назад
 
 
Рекомендуем по теме...

Новые записи

22.10.17 AutoDucking или уменьшение громкости фоновой музыки при записи с микрофона

AutoDucking или уменьшение громкости фоновой музыки при записи с микрофона
Если надо озвучить фильм с голосом за кадром, совместив его с музыкой, и что бы при это на расставлять ключи руками у каждой паузы, можете…