Как изменить background у кнопки input type file?

Question

[Сергей Соболь]

Подскажите, как background у кнопки в инпуте(type="file") сделать белым? Можно ли это сделать исключительно только на HTML & CSS?

Comments

[Надим]

Можно. Дайте ссылку на демо, покажу как.

[Сергей Соболь]

Надим Закиров, https://codepen.io/Dekorate/pen/pobyZVp

Answer 1

[Надим]

Можете менять цвет как хотите:

input.contacts_form-input-file::-webkit-file-upload-button {
    background: #f00;
    border: none;
    outline: none;
}

Comments

[xdevelx]

Это если не нужна поддержка ie и firefox

[Надим]

xdevelx, всегда можно использовать теги label если надо без псевдоклассов.

Answer 2

[xdevelx]

Прочитайте про стилизацию input type file https://tech.geekjob.ru/css-file-input-styling/
или https://dev.to/bugs_bunny/custom-file-upload-button-6nc