Perché <textarea> e <textfield> non prendono font-family e font-size dal corpo?

118

Perché Textareae textfieldnon prendere font-familye font-sizedal corpo?

Guarda un esempio dal vivo qui http://jsbin.com/ucano4

Codice

        <!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 è un comportamento normale allora dovrei scrivere in CSS in questo modo. ho bisogno dello stesso stile in tutto

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

E quanti altri elementi in XHTML da cui non prenderanno lo stile dei caratteri body {....}?

css xhtml

— Jitendra Vyas
fonte

76

Per impostazione predefinita, i browser eseguono il rendering della maggior parte degli elementi del modulo (aree di testo, caselle di testo, pulsanti, ecc.) Utilizzando i controlli del sistema operativo o i controlli del browser. Quindi la maggior parte delle proprietà dei caratteri sono prese dal tema che il sistema operativo sta attualmente utilizzando.

Dovrai scegliere come target gli stessi elementi del modulo se desideri modificare i loro stili di carattere / testo - dovrebbe essere abbastanza facile selezionarli, come hai appena fatto.

Per quanto ne so, solo gli elementi del modulo sono interessati. Fuori della parte superiore della mia testa: input, button, textarea, select.

— BoltClock
fonte

32

Il rimedio più diretto se questo comportamento è indesiderato è quello di aggiungere stili, textarea, input, button, select { font-family: inherit; font-size: inherit; }.

— Devvyn

@Devvyn, dovresti aggiungere text-align: inheritperché i testi dei pulsanti spesso sono allineati al centro.

— Joshua Muheim,

Come faccio il contrario, ovvero, uso quel carattere del sistema operativo per l'intera pagina web / corpo?

— Agirault

@agirault puoi fare qualcosa del genere: body {font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans "," Helvetica Neue "," Helvetica "," Arial ", sans-serif; }

— getup8

149

Per impostazione predefinita, alcuni controlli non ereditano le impostazioni dei caratteri. Puoi sovrascriverlo inserendolo nel tuo CSS:

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

— spoulson
fonte

4

IE precedente alla versione 8 non supporta l'ereditarietà, quindi non funzionerà.

— Capra scontenta

6

Penso che questa sia solo una soluzione cross browser per definire ogni elementobody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }

— Jitendra Vyas

1

Sono d'accordo, questo approccio è più pratico. Volevo solo dimostrare il comportamento che stavi vedendo usando l' inheritapproccio.

— spoulson

Sfortunatamente chrome (versione 59.0.3071.115) non applica la dimensione del carattere: inherit; senza specificare la famiglia di caratteri.

— Ondrej

font-weight: inherit;manca.

— Ceving

10

Tutti i browser hanno fogli di stile predefiniti incorporati. Ecco perché, quando crei una pagina senza stili definiti, i <h1>tag sono grandi e in grassetto e <strong>rendono il testo in grassetto. Allo stesso modo, gli stili dei caratteri <input>e gli <textarea>elementi sono definiti negli stili predefiniti.

Per vedere questo foglio di stile in Firefox, inseriscilo nella barra degli indirizzi: resource://gre/res/forms.css

Ad ogni modo, devi sovrascrivere questi stili come faresti con qualsiasi altro stile come hai fatto nell'ultimo esempio.

Nel caso ti stia chiedendo quali altri stili sono definiti, controlla i file CSS nelle tue risorse. Puoi accedervi tramite l'URL sopra, o cercando nella tua rescartella nella directory di firefox (es:) c:\program files\mozilla firefox\res. Questi sono quelli che potrebbero influenzare gli stili delle pagine normali:

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

— nickf
fonte

ma <h1> sta prendendo lo stile dei caratteri <body>ma <textarea>non

— Jitendra Vyas

3

Gli stili per h1non definiscono un carattere, quindi i tuoi bodystili hanno la precedenza. Gli stili per inputdefiniscono uno stile ed è più specifico del tuo selettore, quindi vince.

— nickf

+1 per il tuo commento. Non ne ero a conoscenza. vuoi dire che alcuni elementi hanno uno stile specifico per impostazione predefinita nel browser e non possono essere sovrascritti dal corpo {....}

— Jitendra Vyas

1

Penso che ciò che intende dire sia che alcuni elementi sono più specifici di altri nel DOM o hanno un ambito più piccolo. Poiché una textarea esiste all'interno del corpo, qualsiasi stile definito per textarea sovrascriverà gli stili del corpo {}. Quindi lo stile textarea predefinito di FF sovrascrive il tuo stile del corpo, anche se il tuo è definito in seguito (di solito qualcosa di più recente avrà la precedenza, ma non se è in un ambito più ampio / meno specifico).

— user1072406
fonte

0

Ho provato tutti i tipi di trucchi per fermare l'area di testo nei dispositivi mobili utilizzando un carattere molto più grande del testo normale. Sembra che quando la mia textarea era cols = "45" il font era normale ma non appena veniva elevato a cols = "71", anche se rimaneva all'interno dei tag td il font diventava grande.

Nella pagina mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) ho trovato questo

textarea {
   text-size-adjust: none;
}

Sembra la migliore risposta per me. Funziona su PC, tablet e, soprattutto, sul mio telefono Android.

— Brian Jones
fonte