Pseudo-elemento ::file-selector-button CSS

Definição e uso

CSS ::file-selector-button Os pseudo-elementos são usados para escolher o botão do tipo <input type="file">.

Exemplo

Exemplo 1

Defina o estilo do botão <input type="file">:

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

Experimente você mesmo

Exemplo 2

Defina o estilo do botão <input type="file"> e adicione efeito de sobreposição:

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

Experimente você mesmo

Sintaxe CSS

::file-selector-button {
  declarações css;
}

Detalhes técnicos

Versão: Módulo de Pseudo-elementos CSS Nível 4

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o pseudo-elemento.

Chrome Edge Firefox Safari Opera
89 89 82 14.1 75

páginas relacionadas

Tutorial:Elementos pseudo-CSS CSS