Стилизуем type="file" с примерами, пошагово

Пошаговое оформление "input file".

1. Стилизация "input file" - увеличение поля.
2. Стилизуем "input file" - надпись в поле.
3. Стилизация "input file", изменение надписи при перетаскивании.
Скачать стилизованный "input file".

4. Изменение текста "input file".
5. Изменение текста "input file" + информация о имени файла.

Стилизация "input file" - увеличение поля.

Если вы возьмете "input file":

<input type="file" name="uploadimg">

То он выглядит довольно скучно! И мало того не эстетично!

Для того, чтобы увеличить поле "input file" вам понадобится:

Возьмем такой же "input file" и добавим туда class для дальнейшей стилизации:

class="class_1"

И где в него добавим display: block;, чтобы "input file" заполнил строку по всей ширине.

Используем "margin: auto;" для установки нашего инпута посередине.

Добавим border "border: 1px solid #d5d5d5;" для показа поля "input file".

Добавим ширину - width: 400px;.

Добавим высоту - height: 150px;.

И чтобы "input file" не прилеплялся к бордюру сделаем внутренний отступ - padding: 20px;.

Теперь можем собрать весь стилизованный "input file" вместе:

Код стилизации "input file" - увеличение поля:

То, что я перечислил давайте соберем в один код:

Html:

<input type="file" name="uploadimg" class="class_1">

Css:

<style>

input.class_1 {

display: block;

margin: auto;

border: 1px solid #d5d5d5;

width: 400px;

height: 150px;

padding: 20px;

}

</style>

Пример стилизации "input file" - увеличение поля:

В случае с примером "стилизации input file" разместим выше приведенный код прямо здесь:

Вы уже можете перетащить сюда файл...




Стилизуем "input file" - надпись в поле.

Следующий шаг нашей пошаговой стилизации поля "input file" - добавление надписи.

Для этого вам понадобится:

Весь код из предыдущего пункта изменим название класса + добавим "position: relative;", чтобы наша надпись не убежала, она будет у нас "position: absolute;".

Добавим классу before.

Позиционируем как абсолютное : position: absolute;.

Ширину и высоту возьмём родительского блока.

Текст поставим посередине -text-align: center;.

Для установки текста посередине по вертикали используем line-height.

Чтобы все буквы были заглавными используем text-transform.

Установим стиль текста font-family, "system-ui" - использует стандартный шрифт на устройстве пользователя.

И font-size = 16px;

Html

<input type="file" name="uploadimg" class="class_2">

Css

<style>

input.class_2 {

display: block;

margin: auto;

border: 1px solid #d5d5d5;

width: 400px;

height: 150px;

padding: 20px;

position: relative;

}

input.class_2::before {

content: 'перетащите сюда файл';

position: absolute;

width: 400px;

height: 150px;

text-align: center;

line-height: 150px;

text-transform: uppercase;

font-family: system-ui;

font-size: 16px;

}

</style>

Пример стилизации "input file" - надпись в поле:

Разметим выше приведенный пример : "стилизации "input file" - надпись в поле"




Стилизация "input file", изменение надписи при перетаскивании.

Для того, чтобы изменять текст при перетаскивании файла в поле "input file" вам потребуется:

Предыдущий пункт, изменим названия класса.

Добавим еще парочку классов.

Далее используем javascript, используем тему " drag and drop".

Соберем весь код - его можно скачать здесь.

Стилизация "input file", изменение надписи при перетаскивании.

Разметим выше приведенный пример : "стилизации "input file" - изменение текста в поле "input file""

Скачать стилизованный "input file", изменение надписи при перетаскивании.

С тебя чашка кофе и забирай готовый скрипт в сборе!




Изменение текста "input file".

Для того, чтобы изменить текст в поле "input file" на ваш собственный текст вам потребуется:

Html:

Нам потребуется поле ввода ""input file":

Используем input с type="file".

Обязательно id.

Сделаем его невидимым - display:none.

<input type="file" id="getFile" style="display:none">

Используем кнопку button с вашим произвольным текстом внутри кнопки:

<button>Здесь ваш измененный текст в "input file"</button>

Css:

Добавим стили:

style="display:block; width:300px; height:30px; cursor: pointer;"

Javascript :

Опять же в кнопку добавим javascript:

onclick

getElementById

Эмуляция нажатия на кнопку input.

onclick="document.getElementById('getFile').click()"

Соберем весь код изменения текста в поле "input file":

Код изменения текста в поле "input file".

Соберем весь код изменения текста в поле "input file" вместе:

<button style="display:block; width:300px; height:30px; cursor: pointer;" onclick="document.getElementById('getFile').click()">Здесь ваш измененный текст в "input file"</button>

<input type="file" id="getFile" style="display:none">

Пример изменения текста в пол "input file".

Разместим собранный код изменения текста в поле "input file" прямо здесь:

Здесь ваш измененный текст в "input file"



Изменение текста "input file" + информация о имени файла.

Выше я разобрал, как можно изменить текст в поле ввода "input file".

НО! Далее возникает следующая проблемка... имя файла не видно и не понятно, а файл вообще выбран? Загружен!?

Давайте исправим.. для этого вма понадобится...

Html:

Код "html" скопируем сверху...

javascript из кнопки уберем, его переместим в отдельный тег script

Изменим id.

И добавим div для отправки названия файла.

<button style="display:block; width:300px; height:30px; cursor: pointer;" id="id_button">Здесь ваш измененный текст в "input file"</button>

<input type="file" id="getFile_2" style="display:none">

<div id="idiv"></div>

Javascript:

При клике на кнопку button произведем пару действий:

По onclick вызовем функцию, внутри разместим:

Эмуляция на нажатия на кнопку input.

И запускам наш цикл - "myLoop";

id_button . onclick = function()

{

getFile_2 . click();

myLoop();

};

Далее определим пару переменных - здесь обращаю ваше внимание про то как обратиться к тегу:

idiv = document.getElementById('idiv');

delay = '1000';

Далее цикл, обращаю ваше внимание, продолжаем пока не будет выбран файл.

При получении имени файла отправляем его с помощью innerHTML в див "idiv".

function myLoop() {

setTimeout(function() {

if(getFile_2 . files[0]) idiv . innerHTML = getFile_2 . files[0].name;

else myLoop();

}, delay)

}

Нам осталось собрать весь код!

Код изменения текста в "input file" + информация о имени файла.

Html:

<button style="display:block; width:300px; height:30px; cursor: pointer;" id="id_button">Здесь ваш измененный текст в "input file"</button>

<input type="file" id="getFile_2" style="display:none">

<div id="idiv"></div>

Javascript:

<script>

idiv = document.getElementById('idiv');

delay = '1000';

function myLoop() {

setTimeout(function() {

if(getFile_2 . files[0]) idiv . innerHTML = getFile_2 . files[0].name ;

else myLoop();

}, delay)

}

id_button . onclick = function()

{

getFile_2 . click();

myLoop();

};

</script>

Пример изменения текста в "input file" + информация о имени файла.

Далее вам остается протестировать весь тот код, что мы навояли сверху! И не забудь сказать спасибо<!

Здесь ваш измененный текст в "input file"