Verificação HTML: CSS: pseudo-elemento ou pseudo-classe desconhecida "::file-selector-button".

Sobre este problema de CSS

O pseudo-elemento ::file-selector-button direciona o botão dentro de um elemento <input type="file"> — a parte em que os utilizadores clicam para abrir a caixa de diálogo de seleção de ficheiros. É suportado em todos os principais navegadores modernos e faz parte da especificação CSS Pseudo-Elements Level 4.

O validador CSS do W3C ainda não foi atualizado para reconhecer ::file-selector-button, o que faz com que marque o pseudo-elemento como inválido. Este é um bug conhecido que foi reportado no GitHub. Como as definições de gramática CSS do validador ficam atrás dos padrões vivos, certas funcionalidades mais recentes — mas totalmente padronizadas — desencadeiam falsos positivos.

Antes de ::file-selector-button ser padronizado, os navegadores usavam versões com prefixos de fornecedor como ::-webkit-file-upload-button e ::-ms-browse. O ::file-selector-button sem prefixo substituiu estes e é agora a abordagem recomendada.

O que você deve fazer

Como esta é uma limitação do validador em vez de um problema real do código, pode ignorar este aviso com segurança. O seu CSS está em conformidade com os padrões. Se quiser suprimir o aviso numa pipeline de CI/CD ou relatório de validação, pode adicionar um comentário a notar o falso positivo, mas não remova ou altere o pseudo-elemento — está correto.

Suporte dos navegadores

::file-selector-button é suportado no Chrome 89+, Firefox 82+, Safari 14.1+, e Edge 89+. Para navegadores mais antigos, pode incluir as versões com prefixos de fornecedor como alternativas, embora estas também desencadeiem avisos do validador.

Exemplos

CSS que desencadeia o aviso do validador

::file-selector-button {
  background-color: #4a90d9;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

Este CSS é válido e correto apesar do aviso do validador. Estiliza o botão de seleção de ficheiros com uma cor de fundo personalizada, cor do texto e raio de borda.

Aplicar a um input específico

input[type="file"]::file-selector-button {
  background-color: #4a90d9;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

input[type="file"]::file-selector-button:hover {
  background-color: #357abd;
}

Incluir alternativas com prefixos de fornecedor para navegadores mais antigos

input[type="file"]::-webkit-file-upload-button {
  background-color: #4a90d9;
  color: white;
  border: none;
  padding: 8px 16px;
}

input[type="file"]::file-selector-button {
  background-color: #4a90d9;
  color: white;
  border: none;
  padding: 8px 16px;
}

A versão com prefixo de fornecedor é colocada primeiro para que a regra ::file-selector-button padrão tenha precedência nos navegadores que suportam ambas. Note que as versões com prefixos de fornecedor também desencadearão avisos do validador pela mesma razão.

HTML correspondente

<label for="upload">Choose a file:</label>
<input type="file" id="upload" name="upload">

Não há nada para corrigir no seu HTML ou CSS. Este é puramente um falso positivo do validador que será resolvido quando o validador do W3C atualizar as suas definições de gramática CSS.