Por que <textarea> e <textfield> não pegam font-family e font-size do corpo?

118

Por que Textareae textfieldnão tirar font-familye font-sizedo corpo?

Veja o exemplo ao vivo aqui http://jsbin.com/ucano4

Código

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>texearea font</title>
        <style type="text/css">
        body {
            font-family: Verdana, Geneva, sans-serif;
            font-size:16px
        }
        </style>
        </head>            
        <body>
        <form action="" method="get">
        <textarea name="" cols="20" rows="4"></textarea>
        <input name="" type="text" />
        </form>
        <p>some text here</p>
        </body>
        </html>

Se for um comportamento normal, devo escrever em css assim. eu preciso do mesmo estilo em todos

body,textarea,input  {
                font-family: Verdana, Geneva, sans-serif;
                font-size:16px
            }

E de quantos outros elementos em XHTML não serão usados estilos de fonte body {....}?

css xhtml

— Jitendra Vyas
fonte

76

Por padrão, os navegadores renderizam a maioria dos elementos do formulário (áreas de texto, caixas de texto, botões, etc.) usando controles do SO ou controles do navegador. Portanto, a maioria das propriedades da fonte são tiradas do tema que o sistema operacional está usando atualmente.

Você terá que direcionar os próprios elementos do formulário se quiser alterar seus estilos de fonte / texto - deve ser fácil, porém, selecionando-os, como você acabou de fazer.

Pelo que eu sei, apenas os elementos do formulário são afetados. Em cima da minha cabeça: input, button, textarea, select.

— BoltClock
fonte

32

O remédio mais direto se esse comportamento for indesejado é adicionar estilos aos seus textarea, input, button, select { font-family: inherit; font-size: inherit; },.

— Devvyn

@Devvyn, você deve adicionar text-align: inheritporque os textos dos botões geralmente são alinhados no centro.

— Joshua Muheim

Como faço o contrário, ou seja, uso essa fonte do sistema operacional em toda a minha página / corpo da web?

— agirault

@agirault, você pode fazer algo assim: body {font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans "," Helvetica Neue "," Helvetica "," Arial ", sans-serif; }

— getup8

149

Certos controles não são padronizados para herdar as configurações de fonte. Você pode substituir isso colocando isto em seu CSS:

textarea {
   font-family: inherit;
   font-size: inherit;
}

— Spoulson
fonte

4

O IE anterior à versão 8 não oferece suporte a herdar, então isso não funcionará.

— DisgruntledGoat

6

Acho que esta é apenas uma solução para vários navegadores para definir todos os elementosbody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }

— Jitendra Vyas

1

Eu concordo, essa abordagem é mais prática. Eu só queria demonstrar o comportamento que você observou ao usar a inheritabordagem.

— spoulson

Infelizmente, o chrome (versão 59.0.3071.115) não está aplicando o tamanho da fonte: herança; sem especificar a família da fonte.

— Ondrej

font-weight: inherit;está desaparecido.

— cevado em

10

Todos os navegadores possuem folhas de estilo padrão integradas. É por isso que, quando você cria uma página sem nenhum estilo definido, as <h1>tags ficam grandes e em negrito, <strong>tornando o texto em negrito. Da mesma forma, os estilos de fonte <input>e os <textarea>elementos são definidos nos estilos padrão.

Para ver esta folha de estilo no Firefox, coloque isto em sua barra de endereço: resource://gre/res/forms.css

De qualquer forma, você deve substituir esses estilos como faria com qualquer outro estilo, como fez no último exemplo.

Caso você esteja se perguntando quais outros estilos estão definidos, verifique os arquivos CSS em seus recursos. Você pode acessá-los através do url acima ou procurando em sua respasta no diretório do firefox (por exemplo:) c:\program files\mozilla firefox\res. Estes são os que podem estar afetando os estilos das páginas normais:

html.css
forms.css
quirk.css
ua.css

— nickf
fonte

mas <h1> está tomando o estilo da fonte, <body>mas <textarea>não

— Jitendra Vyas

3

Os estilos para h1não definem uma fonte, portanto, seus bodyestilos têm precedência. Os estilos de inputdefine um estilo e é mais específico do que o seu seletor, por isso vence.

— nickf

+1 para seu comentário. Eu não estava ciente. você quer dizer que alguns elementos têm um estilo específico por padrão no navegador e não podem ser substituídos pelo corpo {....}

— Jitendra Vyas

1

Acho que o que ele quis dizer é que alguns elementos são mais específicos do que outros no DOM ou têm um escopo menor. Como existe uma textarea dentro do corpo, qualquer estilo definido para textarea substituirá os estilos de corpo {}. Portanto, o estilo textarea padrão do FF sobrescreve seu estilo de corpo, mesmo que o seu seja definido posteriormente (normalmente algo mais recente terá precedência, mas não se estiver em um escopo mais amplo / menos específico).

— user1072406
fonte

0

Tentei todos os tipos de truques para interromper textarea no celular usando uma fonte muito maior do que o texto normal. Parece que quando minha textarea era cols = "45" a fonte estava normal, mas assim que foi aumentada para cols = "71", embora ficasse dentro das tags td, a fonte cresceu muito.

Na página do mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) eu encontrei isso

textarea {
   text-size-adjust: none;
}

Parece a melhor resposta para mim. Funciona no PC, tablet e, o mais importante, no meu telefone Android.

— Brian Jones
fonte