Validación HTML: CSS: Pseudoelemento o pseudoclase desconocida "::file-selector-button".

Acerca de este problema de CSS

El pseudoelemento ::file-selector-button apunta al botón dentro de un elemento <input type="file"> — la parte que los usuarios hacen clic para abrir el diálogo de selección de archivos. Es compatible con todos los navegadores modernos principales y forma parte de la especificación CSS Pseudo-Elements Level 4.

El Validador CSS de W3C aún no ha sido actualizado para reconocer ::file-selector-button, lo que hace que marque el pseudoelemento como inválido. Este es un error conocido que ha sido reportado en GitHub. Debido a que las definiciones de gramática CSS del validador van rezagadas respecto a los estándares vivos, ciertas características más nuevas — pero completamente estandarizadas — provocan falsos positivos.

Antes de que ::file-selector-button fuera estandarizado, los navegadores usaban versiones con prefijos de proveedor como ::-webkit-file-upload-button y ::-ms-browse. El ::file-selector-button sin prefijo reemplazó a estos y ahora es el enfoque recomendado.

Qué debes hacer

Como esta es una limitación del validador más que un problema real del código, puedes ignorar esta advertencia de manera segura. Tu CSS cumple con los estándares. Si quieres suprimir la advertencia en un pipeline de CI/CD o informe de validación, puedes agregar un comentario señalando el falso positivo, pero no elimines o cambies el pseudoelemento — es correcto.

Compatibilidad de navegadores

::file-selector-button es compatible con Chrome 89+, Firefox 82+, Safari 14.1+, y Edge 89+. Para navegadores más antiguos, puedes incluir las versiones con prefijos de proveedor como respaldos, aunque estas también activarán advertencias del validador.

Ejemplos

CSS que activa la advertencia del validador

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

Este CSS es válido y correcto a pesar de la advertencia del validador. Estiliza el botón selector de archivos con un color de fondo personalizado, color de texto y radio de borde.

Limitando el alcance a un 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;
}

Incluyendo respaldos con prefijos de proveedor para navegadores más antiguos

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;
}

La versión con prefijo de proveedor se coloca primero para que la regla estándar ::file-selector-button tenga precedencia en navegadores que soporten ambos. Ten en cuenta que las versiones con prefijos de proveedor también activarán advertencias del validador por la misma razón.

HTML correspondiente

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

No hay nada que arreglar en tu HTML o CSS. Este es puramente un falso positivo del validador que se resolverá cuando el Validador W3C actualice sus definiciones de gramática CSS.