Validación HTML: CSS: Pseudo-elemento o pseudo-clase desconocida "::file-selector-button".

Acerca de este problema de CSS

El pseudo-elemento ::file-selector-button apunta al botón dentro de un elemento <input type="file"> — la parte en la 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 del W3C aún no ha sido actualizado para reconocer ::file-selector-button, lo que hace que marque el pseudo-elemento 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 por detrás de los estándares vivos, ciertas características más nuevas — pero completamente estandarizadas — generan falsos positivos.

Antes de que ::file-selector-button fuera estandarizado, los navegadores usaban versiones con prefijo 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

Dado que esta es una limitación del validador y no un problema real del código, puedes ignorar esta advertencia con seguridad. Tu CSS cumple con los estándares. Si quieres suprimir la advertencia en un pipeline de CI/CD o reporte de validación, puedes añadir un comentario señalando el falso positivo, pero no elimines o cambies el pseudo-elemento — es correcto.

Compatibilidad con 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 prefijo de proveedor como alternativas, aunque estas también generarán advertencias del validador.

Ejemplos

CSS que genera 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.

Aplicando 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 alternativas con prefijo 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 soportan ambas. Ten en cuenta que las versiones con prefijo de proveedor también generará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 corregir en tu HTML o CSS. Esto es puramente un falso positivo del validador que se resolverá cuando el Validador del W3C actualice sus definiciones de gramática CSS.