Кнопка загрузки файла в пользовательском стиле с использованием чистого CSS
В этом руководстве я покажу вам, как создать стильную и удобную кнопку загрузки файла с помощью чистого CSS и HTML.
Разметка
Для загрузки файлов вам необходимо использовать тег input с атрибутом type="file" . Кроме того, вы можете указать, какие типы файлов вы разрешаете загружать с помощью атрибута accept .
HTML:
Эта разметка создает кнопку с заголовком Choose file , за которым следует текст, указывающий имя файла при выборе. По умолчанию это Файл не выбран .
Результат:
Ввод с типом файла по умолчанию выглядит по-разному в разных браузерах:
ChromeEdgeFireFoxSafariСтиль
Структура виджета загружаемого файла состоит из блока, который отображает кнопку и имя файла. Пользователь может щелкнуть в любом месте внутри блока или перетащить файл с рабочего стола, и откроется окно загрузки.
Стилизация блока загружаемых файлов
Если вы примените стили для селектора input[type=file] , они будут установлены для всего блока виджетов, то есть для кнопки и текста.
CSS:
ввод[тип=файл] {
ширина: 350 пикселей;
максимальная ширина: 100%;
цвет: #444;
отступ: 5px;
фон: #fff;
радиус границы: 10px;
граница: 1px сплошная #555;
}
Результат уже выглядит намного лучше, поскольку он указывает зону, в которой пользователь может щелкнуть или перетащить файл.
Результат:
Стиль кнопки загрузки файла
По умолчанию кнопка Выбрать файл имеет простой стиль пользовательского агента. Чтобы стилизовать кнопку с помощью CSS, вы должны использовать псевдоэлемент ::file-selector-button , чтобы выбрать ее. Поддерживается во всех современных браузерах.
CSS:
input[type=file]::file-selector-button {
поле справа: 20px;
граница: нет;
фон: #084cdf;
отступ: 10px 20px;
радиус границы: 10px;
цвет: #fff;
курсор: указатель;
переход: фон .
2s облегчение входа-выхода;
}
input[type=file]::file-selector-button:hover {
фон: #0d45a5;
}
2s облегчение входа-выхода;
}
input[type=file]::file-selector-button:hover {
фон: #0d45a5;
}
Результат
Стилизация зоны щелчка/перетаскивания
Если вы хотите пойти немного дальше, вы можете создать большую зону, где пользователь может щелкнуть и перетащить файлы. Эта большая зона облегчит людям использование виджета, поскольку не требуется такой точности при перетаскивании файла, особенно на небольших экранах. Чтобы реализовать большую зону перетаскивания, вам нужно обернуть загрузку файла input в тег label и указать текст описания, который позволит пользователям узнать, как использовать виджет.
HTML
Для макета нам нужно установить display на flex со свойствами, связанными с flex для позиционирования.
Свойства height и padding для пропорции. И, наконец, добавьте некоторые причудливые стили, такие как эффекты границы и наведения, чтобы выделить зону загрузки файла, и вы готовы к работе.
CSS:
.drop-контейнер {
положение: родственник;
дисплей: гибкий;
зазор: 10 пикселей;
flex-направление: столбец;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
высота: 200 пикселей;
отступ: 20 пикселей;
радиус границы: 10px;
граница: 2 пикселя, пунктир #555;
цвет: #444;
курсор: указатель;
переход: фон .2s плавный вход-выход, граница .2s легкий вход-выход;
}
.drop-контейнер: наведите {
фон: #еее;
цвет границы: #111;
}
.drop-контейнер: наведение .drop-название {
цвет: #222;
}
.drop-название {
цвет: #444;
размер шрифта: 20px;
вес шрифта: полужирный;
выравнивание текста: по центру;
переход: цвет .2s легкий вход-выход;
}
Результат:
Перетащите сюда файлы или
Demo
См.
См. перо Без названия Никита Хлопов (@nikitahl) на КодПене.
Ввод файла CSS Tailwind — Flowbite
Компонент ввода файла можно использовать для загрузки одного или нескольких файлов из хранилища устройства пользователя, доступных в различных размерах, стилях и вариантах и созданных с помощью классов утилиты из Tailwind CSS включая поддержку темного режима.
Убедитесь, что вы включили Flowbite в качестве подключаемого модуля в свой проект Tailwind CSS, чтобы применить все необходимые стили для компонента ввода файла.
Пример загрузки файла #
Начните с простого компонента ввода файлов, чтобы пользователи могли загружать один файл.
Изменить на GitHubВключить полноэкранный режим
Переключить мобильное представление
Переключить темный режим
Загрузка.
..
- HTML
Скопировать в буфер обмена
Загрузить файл
Вспомогательный текст #
Добавьте описательный вспомогательный текст, чтобы информировать пользователей о разрешенных расширениях и размерах файлов.
Изменить на GitHubВключить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
Загрузка…
- HTML
Скопировать в буфер обмена
Загрузить файл
SVG, PNG, JPG или GIF (МАКС.
800x400px).
SVG, PNG, JPG или GIF (МАКС. 800 x 400 пикселей).
Несколько файлов #
Примените атрибут , умноженный на , к компоненту ввода файлов, чтобы разрешить загрузку большего количества файлов.
Включить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
Загрузка…
- HTML
Скопировать в буфер обмена
Загрузить несколько файлов
Размеры №
Выберите один из вариантов размера исходного файла: маленький, стандартный или большой.
Включить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
Загрузка…
- HTML
Скопировать в буфер обмена
Ввод небольшого файла Размер по умолчанию Ввод большого файла
<тип ввода="файл"> <тип ввода="файл">
Дропзона #
Компонент ввода файла dropzone можно использовать для загрузки одного или нескольких файлов, щелкнув в любом месте области.
Включить полноэкранный режим
Переключить вид планшета
Переключить мобильное представление
Переключить темный режим
Загрузка…- HTML
Скопировать в буфер обмена
Нажмите, чтобы загрузить или перетащите
SVG, PNG, JPG или GIF (МАКС. 800x400px)
<дел>
Получить больше обновлений…
Хотите получать уведомления, когда в Flowbite добавляется новый компонент? Подпишитесь на нашу рассылку, и вы будете в числе первых, кто узнает о новых функциях, компонентах, версиях и инструментах.
Адрес электронной почты
Подписываясь, вы соглашаетесь с Условиями обслуживания и Политикой конфиденциальности ConvertKit.