Стилизация кнопки input type file в HTML

В современном CSS input type file плохо поддаётся стилизации. К тому же он выглядит совершенно по-разному в разных браузерах. Чтобы он не выбивался из общего стиля страницы, можно сделать следующее.

Создадим красивую стилизованную кнопку:

Теперь создадим input type file, но сделаем его полностью скрытым внутри div-а с высотой в 0 пикселей:

Обратите внимание на обработчик onchange. При смене выбранного файла форма с файлом сразу же отправляется на сервер.

Повесим обработчик клика на нашу стилизованную кнопку:

Вот и всё. Можно было ещё сделать так, чтобы div закрывал input type не полностью. Плюс сделать input type file прозрачным и с большими значениями ширины, высоты и padding-ов, чтобы ничего от надписи и кнопки не вылазило внутри div. И позади него расположить ещё один div, в котором отображать имя выбранного файла. То есть в этом случае примерно так было бы:

И CSS:

Тут, конечно, могут потребоваться доработки. Но смысл такой, примерно.

Ссылки:

Пример стилизации input type file — пример стилизации

Стилизация кнопки input type file в HTML: 2 комментария

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *