Alterar o estilo padrão da caixa de seleção de texto

A caixa de seleção de arquivo do tipo arquivo  <input> tem um problema muito criticado, ou seja, o estilo padrão do navegador é muito feio e não pode ser customizado.

O efeito em tempo real é o seguinte:

 ::file-selector-buttonPseudo-elementos surgiram para corresponder especificamente ao botão no estilo da caixa de entrada de seleção de arquivo.

 O HTML é o seguinte:

<input type="file">

 Código CSS:

/* 后面的提示文字颜色 */
[type="file"] {
    color: gray;
}
/* 主按钮的样式自定义 */
::file-selector-button {
    height: 3rem;
    font-size: 1rem;
    color: #fff;
    border-radius: .25rem;
    border: 1px solid #2a80eb;
    padding: .75rem 1rem;
    background-color: #2a80eb;
    box-sizing: border-box;
    font-family: inherit;
    cursor: pointer;
}

O efeito é o seguinte:

 Se você deseja ocultar o texto "Nenhum arquivo selecionado" atrás do botão, pode <input>defini-lo para o elemento atual font-size:0.

#file{font-size: 0;}

O efeito é o seguinte: