::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
--------


```css
selector::file-selector-button
```

Ejemplos
--------

### Ejemplo básico

#### HTML


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


#### CSS
```

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



```css
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.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


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


#### CSS
```

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



```css
input[type="file"]::-ms-browse {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
}

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

input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.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 |
| --- |
| CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Extensiones CSS de WebKit (en-US)
* Extensiones CSS de Microsoft
* API de entradas de archivos y directorios (en-US)
* Compatibilidad con la API de entradas de archivos y directorios en Firefox (en-US)
* `<input type="file">` (en-US)