Pseudo-elemento ::file-selector-button de CSS

Definición y uso

CSS ::file-selector-button Los pseudo-elementos se utilizan para seleccionar el botón de tipo <input type="file">.

Ejemplo

Ejemplo 1

Establecer el estilo del botón <input type="file">:

::file-selector-button {
  border: 2px solid black;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: lightgreen;
}

Prueba personalmente

Ejemplo 2

Establecer el estilo del botón <input type="file"> y agregar efecto de hover:

::file-selector-button {
  border: 2px solid black;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: lightgreen;
}
::file-selector-button:hover {
  background-color: salmon;
  cursor: pointer;
}

Prueba personalmente

Sintaxis CSS

::file-selector-button {
  declaraciones css;
}

Detalles técnicos

Versión: Módulo de Pseudo-elementos CSS Nivel 4

Compatibilidad del navegador

Los números en la tabla especifican la versión del navegador más reciente que admite completamente el pseudo-elemento.

Chrome Edge Firefox Safari Opera
89 89 82 14.1 75

páginas relacionadas

Tutoriales:Elementos pseudo de CSS