Стили для поля загрузки файла

Разработчики часто сталкиваются с ситуацией, когда сложно обеспечить, чтобы input type file в форме выглядело одинаково в разных браузерах. Или чтобы стиль кнопки «Выбрать файл» соответствовал общим стилям сайта.

В этой статье мы рассмотрим пример на JQuery, CSS и HTML для создания настраиваемого пользовательского интерфейса загрузки файлов, который выглядит одинаково в разных браузерах. Также в нем можно настроить кнопку «Выбрать файл«, чтобы она соответствовала стилистике вашего сайта.

HTML-код для поля загрузки файлов:

Обратите внимание на классы в следующем коде:

<input type="text" class="file_input_textbox" readonly="readonly" value='No File Selected'>
<div class="file_input_div">
    <input type="button" value="Browse" class="file_input_button" />
    <input type="file" name="uploaded_file" class="file_input_hidden"/>
</div>

Классы CSS для описанных выше компонентов

Приведенные ниже стили CSS играют основную роль в настройке input type file стилизации. С помощью CSS мы делаем три вещи:

  • Скрываем сам элемент ввода с помощью класса file_input_hidden;
  • Настраиваем кнопку выбора файла с помощью класса file_input_button и добавляем к ней эффект наведения, используя класс file_input_button_hover;
  • Настраиваем свойства текстового поля, используя класс file_input_textbox:
<style type="text/css">
.file_input_textbox {height:25px; width:200px; float:left; }
.file_input_div {position: relative; width:80px; height:26px; overflow: hidden; }
.file_input_button {width: 80px; position:absolute; top:0px; border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px; border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer; opacity:0; filter:alpha(opacity=0); -ms-filter:"alpha(opacity=0)"; -khtml-opacity:0; -moz-opacity:0; }
</style>

Вы можете внести следующие изменения в CSS:

  • Изменить размер текстового поля и кнопки;
  • Изменить цвет фона кнопки, а также фоновое изображение;
  • Увеличить текстовое поле и кнопку, изменить / удалить их границу;
  • Изменить внешний вид html input type file, добавляя / удаляя CSS-код для конкретного браузера.

JQuery-код для добавления / удаления классов CSS при событии mouseover

Можно поместить код пользовательской проверки в следующий код JQuery.

Например, для события hange(), мы заменяем префикс fakepath, который применяется браузером Google Chrome:

<script src="jquery-1.8.2.min.js"></script>

<script>

$(document).ready(function() {

  $('.file_input_button').mouseover(function(){
          $(this).addClass('file_input_button_hover');
    });

  $('.file_input_button').mouseout(function(){
        $(this).removeClass('file_input_button_hover');
    });

  $('.file_input_hidden').change(function(){

        var fileInputVal = $(this).val();

        fileInputVal = fileInputVal.replace("C:fakepath", "");

        $(this).parent().prev().val(fileInputVal);

    });
});

</script>

Примеры:

Добавьте приведенный выше код оформления input type file в разметку страницы и проверьте его в браузерах. Мы протестировали его в Firefox и Google Chrome.

Не забудьте поместить jquery-1.8.2.min.js в ту же папку, где располагается html-файл. Или можно загрузить JQuery с помощью Google CDN.

С помощью настройки элементов интерфейса через CSS можно сделать поле загрузки файла таким:

JQuery-код для добавления / удаления классов CSS при событии mouseover
JQuery-код для добавления / удаления классов CSS при событии mouseover - 2

Пожалуйста, оставьте свои комментарии по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, дизлайки, отклики, подписки!

Пожалуйста, оставьте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, дизлайки, отклики, лайки!

Вадим Дворниковавтор-переводчик статьи «style-file-upload-browse-button»