padding de placeholder direferente em Mozilla Firefox Vs Chrome

Olá, Livio.

Tudo bem?

Eu testei algumas formas e não funcionaram, pois a imagem SVGda carta de email no Chrome se move quando coloca um padding ou background-position já no Firefox ela não mexe com o padding somente com o background-position então fica difícil achar um meio termo. Eu tentei achar um meio termo bom para ambos e sem usar web-moz, fiz o seguinte:

.contato__email::placeholder {
    font-family: var(--fonte-principal);
    color: var(--azul);
    background: url("../img/Email.svg") no-repeat;
    background-position: 5px center;
    padding-left: 3em;
}
.contato__email:placeholder-shown {
    color: var(--azul);
    padding-left: 2em;
}

Testa ai e me fala o que achou.

Espero ter ajudado. Valeu.

Bom dia, obrigado pelo retorno.

Para deixar bem claro a experiência coloquei os dois navegadores lado a lado, o da esquerda é o Chrome o da direita o Firefox.

O código inicial é este (o meu esta em SASS, mas o resultado é o mesmo):

.contato__email {
    border: 0.1rem solid $azul;
    border-radius: 2.4rem;
    color: $azul;
    padding: 1.6rem;
    width: 90%;
    &::placeholder {
        background: url("../../img/Email.svg") 5px center no-repeat;
        color: $azul;
        font-family: $fonte-principal;
        font-size: 1.4rem;
        font-weight: 400;
        padding-left: 3.2rem;
    }
    /* &:placeholder-shown {
        padding-left: 3.5rem;
    } */
}

Deixei o &:placeholder-shown comentado e segue o retorno:

Agora vou habilitar o

&:placeholder-shown

segue o codigo:

.contato__email {
    border: 0.1rem solid $azul;
    border-radius: 2.4rem;
    color: $azul;
    padding: 1.6rem;
    width: 90%;
    &::placeholder {
        background: url("../../img/Email.svg") 5px center no-repeat;
        color: $azul;
        font-family: $fonte-principal;
        font-size: 1.4rem;
        font-weight: 400;
        padding-left: 3.2rem;
    }
    &:placeholder-shown {
        padding-left: 3.5rem;
    }
}

Resolve no Firefox (ainda precisa de um padding esquerdo na carta para ficar perfeito, mas é só um detalhe). O problema é que da um padding também no Chrome.

Então pensei o seguinte vou adicionar um moz-placeholder-shown porque assim somente seria ajustado no Firefox e pronto. Para minha surpresa o moz-placeholder-shown é ignorado, ou seja, não existe este comando somente moz-placeholder.

Por fim eu não gostaria de ir para o lado negro da força e retirar esta carta para navegadores Firefox. Fazendo por exemplo:

.contato__email {
        border: 0.1rem solid $azul;
        border-radius: 2.4rem;
        color: $azul;
        padding: 1.6rem;
        width: 90%;
        &::placeholder {
            background: url("../../img/Email.svg") 5px center no-repeat;
            color: $azul;
            font-family: $fonte-principal;
            font-size: 1.4rem;
            font-weight: 400;
            padding-left: 3.2rem;
        }
        &::-moz-placeholder {
            background: url("");
        }
    }

O resultado seria:

Que tristeza eu gostava daquela carta. ☹

Alguém enxerga alguma solução para este problema? Algum Jedi pode nos ajudar a manter tudo em harmonia e com as forças equilibradas?

Rs, grande abraço e obrigado.

#compartilheConhecimento

Oi, Livio! Tudo bom?

Realmente foi confusão minha não ter testado antes se dava pra fazer no Mozilla essa solução, passei a tarde testando várias coisas pra fazer o <input> o mais semelhante possível em ambos navegadores mas acontece a mesma coisa que no seu primeiro printscreen.

Vou continuar procurando mas não queria te deixar sem atualizações!