<input> não herda a fonte de <body>

102

Tenho campos de entrada e rótulo:

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

e CSS:

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm  { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm  { font-size:0.9em; margin:0 0 3px 3px; }

Quando o código é aberto no Firefox, as fontes não são as mesmas. Firebug mostra que ambos "deveriam" herdar e quando eu olho para computado ele mostra que o rótulo usa Verdana. No entanto, a entrada mostra que ele usa "MS Shell Dlg".

Alguém pode explicar o que está acontecendo e por que parece não obedecer às regras normais de CSS?

css Judy R
fonte
é muito triste que não. Acho que o W3C decidiu que seria melhor deixá-los com o estilo padrão do sistema, em vez de forçar seu próprio estilo de navegador neles
vsync

Respostas:

125

Ele não herda por padrão, mas você pode configurá-lo para herdar com css

input, select, textarea, button{font-family:inherit;}

demonstração: http://jsfiddle.net/gaby/pEedc/1/

Gabriele Petrioli
fonte
propriedade de fonte herança automática se não for mencionada, veja aqui: developer.mozilla.org/en/CSS/font
diEcho
4
@diEcho, isso é verdadeiro para todos os elementos além dos elementos de formulário, que herdam do estilo do sistema atual, de forma que mantêm uma sensação familiar ao usuário ( por padrão ), mas podem ser substituídos manualmente.
Gabriele Petrioli
1
Errado ou não, o que o Firebug estava me mostrando era muito confuso: fonte tamanho 12, mas calculado ainda era 13,3333. Depois de definir o tamanho da fonte para herdar análogo à resposta de Gaby, meu problema foi resolvido: O
Jeroen
@Gaby É sempre bom que os designers pensem por nós, desenvolvedores ...;)
AGuyCalledGerald
Além disso, se você colocar o inputinterior label, a labeltag não herda o css padrão
AmerllicA
16

Os itens do formulário (entradas / textarea / etc) não herdam as informações da fonte. Você precisará definir a família de fontes nesses itens.

John Green
fonte
@jhon wat ever ur dizendo pode ser verdade, existe algum documento padrão / válido a respeito disso ??
diEcho de
elementos de fonte também não herdam cor, plano de fundo e assim por diante. Na verdade, os elementos de fonte são a coisa menos confiável em todo o html / css! Você não pode especificar uma largura para uma caixa de entrada e a garantia será a mesma em todos os navegadores!
Ionuț Staicu
Quero dizer elementos de forma. Ainda com sono :)
Ionuț Staicu
@diEcho - Sinceramente, eu fiz uma pesquisa nas especificações e não vi nenhuma chamada. Olhando em 'Related', o SO está me dando um link de pergunta duplicado: stackoverflow.com/questions/2874813 (que fornece minha resposta, embora também sem links de especificações). A folha de estilo padrão no Chrome lista a fonte como "-webkit-small-control;", o que significa que já está substituindo o corpo, portanto, é mais específico do que qualquer coisa definida no corpo. O mesmo vale para os elementos TD, se não me engano. Portanto, não sei o que dizer a não ser "é assim mesmo". :)
John Green
5

Três anos mais tarde, eu estou achando estranho <input>elementos de tipos reset, submite buttonnão herdam font-familyno Chrome ou Safari. Descobri que eles também não receberiam preenchimento.

Mas quando eu mexo com certas propriedades, como background, borderou esta appearancepropriedade estranha , então font-familye paddingtem efeito, mas a aparência nativa do botão é perdida, o que não é um problema se você estiver reestilizando completamente os botões.

Se você quiser um botão com aparência nativa, com herdado font-family, use o <button>elemento em vez de <input>.

Veja Codepen .

Stoutie
fonte
1

Eu tive o mesmo problema. O que funcionou para mim foi adicionar o estilo diretamente ao elemento de entrada no html. Estou codificando no React fyi.

<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />

rpd1297
fonte