Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Ajuste de Placeholder

por Cristiano Aguiar da Silva
| 38.7k xp | 4 posts

Acompanhando uma aula de mobile first, foi criado um input de cadastro de e-mail. A estilização ficou assim:

.cadastro__email::placeholder {
    font-family: var(--font-principal);
    font-size: 0.85rem;
    font-weight: 400;
    text-align: left;
    color: var(--azul);
    background: url("../assets/Vector_Email.svg") no-repeat;
    padding-left: 2rem;
}

Porém, ao ajustar para o tamanho 1024px da tela, o background foi para a esquerda. E o padding-left que antes ajustava o texto para o lado, no tamanho 1024px, nem se mexe.

Essa foi a mudança que fiz:

.cadastro__email {
        width: 50%;
 }
 
.cadastro__email::placeholder {
        font-size: 1rem; 
        background-position: 2rem;
        padding-left: 5rem;
    }

Para a imagem aparecer coloquei esse position: 2rem; e o padding-left nem mexe.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

alguém pode me tirar essa dúvida?

Isso ocorre no firefox. No chrome está normal.

2 respostas
por Ronald Andrade Mendonça da Silva
| 11.3k xp | 2 posts
Sargento

Olá, Cristiano.

Na tentativa de simular seu projeto fiz dessa forma : O input do HTML

<div class="input-wrapper">
    <input id="cadastro__email" type="text" placeholder="Digite seu e-mail">
</div>

e o CSS ficaria assim:

#cadastro__email {
    width: 25%;
    padding-left: 3rem;
    box-sizing: border-box;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464l349.5 0c-8.9-63.3-63.3-112-129-112l-91.4 0c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3z"/></svg>') no-repeat;/* icone do https://fontawesome.com/v6/icons/user?f=classic&s=regular*/
    background-size: 1rem; 
    background-position: 0.5rem center;

Aqui funcionou em ambos navegadores. Placeholders e backgrounds as vezes funcionam de maneira diferente do firefox para o Chrome.

Segue o link para mais informações: https://www.w3schools.com/cssref/css3_browsersupport.php

por Cristiano Aguiar da Silva
| 38.7k xp | 4 posts

Obg pelo dica! Eu tinha colocado no mobile dentro do placeholder (.cadastro__email::placeholder) . Quando ajusta no @media screen , o placeholder não ajusta.

Fazendo como vc, direto na classe do input, ai consegue ajustar!