::file-selector-button

El pseudoelemento CSS ::file-selector-button representa el botón de un <input> con el atributo type="file" (en-US).

Pruébalo

Nota: Las versiones anteriores de navegadores compatibles con WebKit/Blink como Chrome, Opera y Safari (indicados por el prefijo -webkit) admitían un pseudoelemento no estándar ::-webkit-file-upload-button.

Legacy Edge y las versiones posteriores de IE admitían un pseudoelemento no estándar ::-ms-browse.

Ambos pseudo-elementos tienen el mismo propósito que ::file-selector-button.

Sintaxis

selector::file-selector-button

Ejemplos

Ejemplo básico

HTML

<form>
  <label for="fileUpload">Subir archivo</label>
  <input type="file" id="fileUpload">
</form>

CSS

form {
  display: flex;
  gap: 1em;
  align-items: center;
}

input[type=file]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type=file]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

Resultado

Ejemplo con respaldo para navegadores antiguos que admiten los prefijos -webkit y -ms. Tenga en cuenta que, como selector, deberá escribir el bloque de código completo dos veces, ya que un selector no reconocido invalida toda la lista.

Tenga en cuenta que ::file-selector-button es un elemento completo y, como tal, coincide con las reglas de la hoja de estilo del User-Agent. En particular, las fuentes y los colores no heredarán necesariamente del elemento input.

Ejemeplo con respaldo

HTML

<form>
  <label for="fileUpload">Subir archivo</label>
  <input type="file" id="fileUpload">
</form>

CSS

form {
  display: flex;
  gap: 1em;
  align-items: center;
}

input[type=file]::-ms-browse {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
}

input[type=file]::-webkit-file-upload-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type=file]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type=file]::-ms-browse:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type=file]::-webkit-file-upload-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type=file]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

Resultado

Especificaciones

Specification
Unknown specification # file-selector-button-pseudo

Compatibilidad con navegadores

BCD tables only load in the browser