Alguém mais teve problema com a diferença de fonte dos options no navegador?
Alguém mais teve problema com a diferença de fonte dos options no navegador?
Olá, Alexsandro! Tudo bem?
Sim, esse é um comportamento muito comum e "chato" do CSS nativo dos navegadores!
Isso acontece porque elementos de formulário (como input, select, textarea e button) geralmente não herdam a font-family definida no body ou no html por padrão. Eles tendem a usar a fonte padrão do sistema operacional para controles de interface, o que causa essa diferença visual em relação ao resto da página.
Analisando o CSS fornecido na aula, a classe .campo define o peso (font-weight: 400) e o tamanho (font-size: 1rem), mas não define explicitamente a família da fonte.
Para corrigir isso, você precisa forçar o select a herdar a fonte da aplicação. Adicione a propriedade font-family: inherit; na classe .campo dentro do seu arquivo form-nova-transacao.component.css:
.campo {
/* Propriedades já existentes no código da aula*/
border-radius: 1rem;
border: 2px solid var(--preto);
padding: 0.5rem 1rem;
font-weight: 400;
font-size: 1rem;
/* Adicione esta linha: */
font-family: inherit;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
transition: border .3s;
}
Vale avisar: embora o comando acima corrija a fonte do texto que aparece dentro do campo select (quando fechado), a lista suspensa (o dropdown com os <option>) é renderizada diretamente pelo sistema operacional em muitos navegadores (principalmente no Chrome/Windows).
Isso significa que, mesmo com o CSS correto, o navegador pode ignorar a estilização de fonte apenas na lista de opções aberta. Infelizmente, para ter controle total sobre a aparência das options, seria necessário criar um componente de dropdown customizado (divs que imitam um select) em vez de usar o tag nativa <select>, mas para o objetivo do curso, o font-family: inherit já resolve a maior parte da dissonância visual.
Espero que ajude!
Bons estudos!
Sucesso ✨
Muito obrigado pelo retorno!!! eu havia pesquisado o assunto e descobri isso... realmente o problema só ocorre no firefox que ignora as configurações do css para os campos que você mencionou, nos demais navegadores a formatação funciona normalmente