clear:both;

Тег input type="file" наверное сложнее всего видоизменять. В основном это связано с тем, что из-за ограничений безопасности браузеры не позволяют их сильно видоизменять.

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

Если вы поищите в интернете, то вы найдете множество статей о том, как можно это сделать. Но большинство из них вовсю используют jQuery, CSS и JavaScript.

Я нашел способ, который позволяет решить эту проблему достаточно просто. Итак, всего 4 шага.

Шаг первый. Создаем textbox и input type="file".

Начинаем с textbox и div'а с input type="file" внутри. Div должен быть размером с кнопку "Выбрать...", которую вы будете использовать.

Единственный трюк здесь в том, что свойство overflow в css-классе div'а должно иметь значение hidden. После чего всё содержимое div'а, которое выходит за его рамки, будет скрыто (см. скриншот).

html:

<input id="fileName" class="file_input_textbox" readonly />

<div class="file_input_div">
    <input type="file" />
</div>

CSS

.file_input_textbox
{
float: left
}

.file_input_div
{
    position: relative; 
    width: 100px; 
    height: 23px; 
    overflow: hidden;
}

Скриншот

Второй шаг. Веселая часть: чрезмерное увеличение input type="file".

Теперь нам надо, чтобы кнопка, которая является input type="file", занимала весь div. Выравнивания по правому краю будет достаточно, потому что разные браузеры отображают кнопку по-разному.

Итак, мы подходим к самому главному трюку — чрезмерному увеличению кнопки. Достаточно просто указать шрифт абсурдного размера. Например, 30px.

html:

<input id="fileName" class="file_input_textbox" readonly />

<div class="file_input_div">
    <input type="file" class="file_input_hidden" />
</div>

CSS

.file_input_hidden
{
    font-size: 23px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    opacity: 0; 
}

Скриншот

Шаг третий. Делаем input type="file" невидимым и кладем под него нашу кнопку.

Если мы сделаем кнопку тэга input type="file" невидимой, то это совсем не будет значить, что мы не сможем её нажать. Так что, как уже говорилось, делаем ее невидимой и кладем под неё нашу кнопку.

Теперь мы видим нашу кнопку, но когда мы нажимаем на неё, то на самом деле мы нажимаем на невидимую кнопку input type="file" (ту, что чрезмерно увеличена и со стилем overflow, помните?)

Мы можем стилизовать нашу кнопку как угодно, для этого нужно изменить css-класс "file_input_button".

html:

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">

<div class="file_input_div">
    <input type="button" value="Search files" class="file_input_button" />
    <input type="file" class="file_input_hidden" />
</div>

CSS

.file_input_button
{
    width: 100px; 
    position: absolute; 
    top: 0px;
    background-color: #33BB00;
    color: #FFFFFF;
    border-style: solid;
}

.file_input_hidden
{
    font-size: 45px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    opacity: 0; 

    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)"; 
    -khtml-opacity: 0; 
    -moz-opacity: 0;
}

Скриншот

Четвертый шаг. Заполняем textbox именем выбранного файла.

Если вы выполнили все шаги этого учебника, вы наверное заметили, что если выбрать файл, то в textbox'е ничего не будет. Всё это происходит потому, что название файла пишется в спрятанный input type="file".

Последний шаг заключается в том, чтобы написать маленький JavaScript, который при событии onchange тэга input type="file" будет заполнять textbox значением (названием файла) из input type="file".

html:

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">

<div class="file_input_div">
    <input type="button" value="Search files" class="file_input_button" />
    <input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value"/>
</div>

Вуаля! Всё работает! Я протестировал это решение в Firefox 3, IE6, IE7, IE8, Opera 10 и Chrome 3. Везде оно работает отлично.

Собираем всё вместе.

Итак, весь исходный код этой статьи:

//css
.file_input_textbox
{
     float: left
}

.file_input_div
{
    position: relative; 
    width: 100px; 
    height: 23px; 
    overflow: hidden;
}

.file_input_button
{
    width: 100px; 
    position: absolute; 
    top: 0px;
    background-color: #33BB00;
    color: #FFFFFF;
    border-style: solid;
}

.file_input_hidden
{
    font-size: 45px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    opacity: 0; 

    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)"; 
    -khtml-opacity: 0; 
    -moz-opacity: 0;
 }

 //html
 <input type="text" id="fileName" class="file_input_textbox" readonly="readonly">

 <div class="file_input_div">
      <input type="button" value="Search files" class="file_input_button" />
      <input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
 </div>

Всё. Надеюсь это поможет вам в ваших проектах!

Источник