CSS селектор ::file-selector-button — стилізація input type=file

CSS псевдоелемент ::file-selector-button стилізує кнопку «Огляд» у полі <input type="file">.

правити

Загальний опис

Це та сама кнопка, яку роками ховали й підміняли власною через <label>. Тепер її можна просто стилізувати — без хитрощів і без втрати доступності.

правити

+ додати пораду чи нотатку

Синтаксис

::file-selector-button

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
file-selector-button	89+	82+	14.1+	75+	89+	-

Підтримка: мобільні переглядачі

Переглядач
file-selector-button	89+	yes	yes	14.5+

Приклади

+ запропонувати свій приклад у пісочниці

<input type="file">

input[type="file"]::file-selector-button {
    padding: .5rem 1rem;
    border: none;
    border-radius: 4px;
    background: #0172ad;
    color: #fff;
    cursor: pointer;
}