Oi, pessoal!
Queria saber como mudar o tamanho do texto e padronizar a fonte que fica dentro do placeholder, por que como mostro na imagem abaixo, a letra fica muito pequena e no campo mensagem a fonte fica diferente.
Segue aqui o código CSS que tentei utilizar para fazer isso, mas não funcionou:
placeholder{
font-size: 16px;
font-family: system-ui, -apple-system, 'Open Sans', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;;
}
hoje, com a Alura e o Google Gemini
#nome::-webkit-input-placeholder{
color:#1C1C1C;
background-color: #4682B4;
text-transform: uppercase;
font-style: bold;
font-size:15px;
}Podemos estilizar o PlaceHolder dessa forma : sendo onde esta o ' #nome ' o ID do input que deseja alterar !
Nesse caso eu troquei:
color -- > Cor da fonte background-color -- > cor do fundo text-transform --> Letra maiúscula ou minúscula font-style -- > Estilo da fonte font-size --> Tamanho da fonte
Olá!
O que significa os dois pontos nesse contexto?
#nome::webkit-webkit é uma pseudo classe do próprio browser?
aplicado à todos os placeholders
::placeholder {
color: green;
}aplicado aos placeholders com os inputs que contenham esta classe específica
.force-opaque::placeholder {
color:green;
}essas sao as variações para garantir compatibilidade com os diferentes navegadores (todas fazem a mesma coisa)
::-webkit-input-placeholder { /* Edge */
color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
::placeholder {
color: red;
}