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

Sobre este problema de CSS

O pseudo-elemento ::file-selector-button tem como alvo 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 W3C CSS Validator ainda não foi atualizado para reconhecer ::file-selector-button, o que faz com que sinalize o pseudo-elemento como inválido. Este é um bug conhecido que foi reportado no GitHub. Como as definições gramaticais CSS do validador ficam atrás dos padrões em constante evolução, certas funcionalidades mais recentes — mas completamente padronizadas — geram falsos positivos.

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

O que deve fazer

Uma vez que 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 CI/CD ou num relatório de validação, pode adicionar um comentário mencionando o falso positivo, mas não remova nem 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 prefixo do fornecedor como fallbacks, embora estas também acionem avisos do validador.

Exemplos

CSS que aciona 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 do seletor de ficheiros com uma cor de fundo personalizada, cor do texto e raio da borda.

Aplicação 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;
}

Incluindo fallbacks com prefixo do 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 do fornecedor é colocada primeiro para que a regra padrão ::file-selector-button tenha precedência em navegadores que suportem ambas. Note que as versões com prefixo do fornecedor também acionarã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. Isto é puramente um falso positivo do validador que será resolvido quando o W3C Validator atualizar as suas definições gramaticais CSS.