Довольно тривиальная задача, но у многих начинающих веб-дизайнеров может вызвать массу проблем. Я привожу небольшой пример кода для стилизации кнопки загрузки:
input[type="file"] { margin-top: 2px; line-height: 1; vertical-align: middle; } input[type="file"]::-webkit-file-upload-button { font-size: 12px; }
Для того, чтобы изменить внешний вид кнопки достаточно внести свои css правила во в этот блок:
input[type="file"]::-webkit-file-upload-button { font-size: 12px; }
Например как у меня:
input[type="file"]::-webkit-file-upload-button { font-size: 12px; background:#f9765c; border:none; padding:12px; cursor:pointer; color:#fff; border-radius: 3px }
И так я добавил эффект при наведении(hover):
input[type="file"]::-webkit-file-upload-button:hover { font-size: 12px; background:#ffae5f; border:none; padding:12px; cursor:pointer; color:#fff; border-radius: 3px }
Статья была полезной? Поделитесь с друзьями!
К сожалению своему понял что данный способ работает только в браузерах основанных на webkit
На андройде вроде нормально