стилизуем type="file" с примерами, пошагово
"стилизация input file", что такое "стилизация input file". Разные способы стилизовать input file. О какой стилизации type="file" идет речь? Чтобы вы сразу поняли о каком оформлении идет речь смотри здесь.
Пошаговое оформление "input file".
- Стилизация "input file" - увеличение поля.
- Стилизуем "input file" - надпись в поле.<
- Стилизация "input file", изменение надписи при перетаскивании.< Скачать стилизованный "input file".
Стилизация "input file" - увеличение поля.
Если вы возьмете "input file":
<input type="file" name="uploadimg">
То он выглядит довольно скучно! И мало того не эстетично!
Для того, чтобы увеличить поле "input file" вам понадобится:
Возьмем такой же "input file" и добавим туда class для дальнейшей стилизации:
И где в него добавим 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", изменение надписи при перетаскивании.
С тебя чашка кофе и забирай готовый скрипт в сборе!
