Alguém mais teve problema com a diferença de fonte dos options no navegador?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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