File input css: html — How to customize ?

html — Как изменить цвет кнопки ввода файла в форме после выбора файла с помощью css?

спросил 1 год, 7 месяцев назад

Изменено 1 год, 7 месяцев назад

Просмотрено 711 раз

Я создаю простую веб-страницу с формой, в которой есть входные данные с типом файла, и я хочу изменить цвет границы кнопки «выбрать файл», когда я выбираю файл, чтобы указать, что файл выбран.

Я пытался использовать псевдокласс :focus в css, чтобы попытаться изменить цвет при нажатии, но это работает только до тех пор, пока не будет нажато что-то еще на странице. Я также попробовал псевдокласс :visited, но ничего не произошло.

Вот соответствующий HTML-код:

 
Выбрать файл
 

css:

 . file-button {
    дисплей: блок;
    поле: 10px авто;
    ширина: 400 пикселей;
    радиус границы: 10px;
    выравнивание текста: по центру;
    выравнивание содержимого: по центру;
    черный цвет;
    вес шрифта: полужирный;
    размер шрифта: 36pt;
    граница: 5 пикселей сплошного серого цвета;
    отступ: 8px 0px;
}
ввод[тип="файл"]{
    непрозрачность: 0;
    ширина: 0,1 пикселя;
    высота: 0,1 пикселя;
    переполнение: скрыто;
    z-индекс: -1;
    положение: абсолютное;
}
ввод [тип = "файл"]: фокус + метка {
    цвет границы: черный;
}
 

• html
• css
• формы
• псевдокласс

1

Есть несколько способов сделать это. Если у вас есть полный код js, ответить будет намного проще. По сути, вы можете использовать троицу, чтобы определить, загружен ли файл (сохранен ли он в состоянии), а затем изменить CSS на основе этого.

Например:

 const [isUploaded, setIsUploaded] = useState(null)
//Измените загрузку на true после выбора файла
 Выбрать файл
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Кнопка загрузки файла в пользовательском стиле с чистым CSS

Опубликовано: 15 июля 2022 г. · Время чтения: 6 мин

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

Разметка

Чтобы загрузить файлы, вам нужно использовать входной тег с атрибутом type="file" . Кроме того, вы можете указать, какие типы файлов вы разрешаете загружать с помощью атрибута accept .

HTML:

Эта разметка создает кнопку с заголовком Choose file , за которым следует текст, указывающий имя файла при выборе. По умолчанию это Файл не выбран .

Результат:

Ввод с типом файла по умолчанию выглядит по-разному в разных браузерах:

ChromeEdgeFireFoxSafari

Стиль

Структура виджета загружаемого файла состоит из блока, который отображает кнопку и имя файла. Пользователь может щелкнуть в любом месте внутри блока или перетащить файл с рабочего стола, и откроется окно загрузки.

Стилизация блока загружаемого файла

Если вы применяете стили для ввода [type=file] , он установит их для всего блока виджетов, то есть для кнопки и текста.

CSS:

 input[type=file] {
  ширина: 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;
}
 

Результат

Стилизация зоны щелчка/перетаскивания

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

Чтобы реализовать большую зону перетаскивания, вам нужно обернуть загрузку файла input в тег label и указать текст описания, который позволит пользователям узнать, как использовать виджет.

HTML

 
  Перетащите файлы сюда
  или же
  

 

Для макета нам нужно установить display на flex с гибкими свойствами для позиционирования. свойства height и padding для пропорции.