Warum nehmen <textarea> und <textfield> Schriftfamilie und Schriftgröße nicht aus dem Körper?

118

Warum Textareaund textfieldnicht nehmen font-familyund font-sizevom Körper?

Siehe Live-Beispiel hier http://jsbin.com/ucano4

Code

        <!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>

Wenn es ein übliches Verhalten ist, sollte ich dann in CSS schreiben. Ich brauche den gleichen Stil in allen

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

Und wie viele andere Elemente in XHTML, für die kein Schriftstil verwendet wird body {....}?

css xhtml Jitendra Vyas
quelle

Antworten:

76

Standardmäßig rendern Browser die meisten Formularelemente (Textbereiche, Textfelder, Schaltflächen usw.) mithilfe von Betriebssystem- oder Browsersteuerelementen. Die meisten Schrifteigenschaften stammen also aus dem Thema, das das Betriebssystem derzeit verwendet.

Sie müssen die Formularelemente selbst als Ziel festlegen, wenn Sie ihre Schrift- / Textstile ändern möchten. Dies sollte jedoch einfach sein, indem Sie sie auswählen, wie Sie es gerade getan haben.

Soweit ich weiß, sind nur Formularelemente betroffen. Aus der Spitze von meinem Kopf: input, button, textarea, select.

BoltClock
quelle
31
Das direkteste Mittel, wenn dieses Verhalten unerwünscht ist, ist das Hinzufügen zu Ihren Stilen textarea, input, button, select { font-family: inherit; font-size: inherit; }.
Devvyn
@ Devvyn, sollten Sie hinzufügen, text-align: inheritda die Texte der Schaltflächen häufig in der Mitte ausgerichtet sind.
Joshua Muheim
Wie mache ich das Gegenteil, auch bekannt als, diese Betriebssystemschriftart für meine gesamte Webseite / meinen gesamten Körper?
Agirault
@agirault können Sie so etwas tun: body {Schriftfamilie: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid" Sans "," Helvetica Neue "," Helvetica "," Arial ", serifenlos; }
getup8
149

Bestimmte Steuerelemente übernehmen standardmäßig nicht die Schriftarteinstellungen. Sie können dies überschreiben, indem Sie dies in Ihr CSS einfügen:

textarea {
   font-family: inherit;
   font-size: inherit;
}
Spoulson
quelle
4
IE vor Version 8 unterstützt kein Erben, daher funktioniert das nicht.
DisgruntledGoat
6
Ich denke, dies ist nur eine browserübergreifende Lösung, um jedes Element zu definierenbody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }
Jitendra Vyas
1
Ich stimme zu, dieser Ansatz ist praktischer. Ich wollte nur das Verhalten demonstrieren, das Sie mit dem inheritAnsatz gesehen haben.
Spoulson
Leider wendet Chrome (Version 59.0.3071.115) keine Schriftgröße an: erben; ohne Angabe der Schriftfamilie.
Ondrej
font-weight: inherit;wird vermisst.
22.
10

Alle Browser verfügen über integrierte Standard-Stylesheets. Wenn Sie eine Seite ohne definierte Stile erstellen, sind die <h1>Tags daher groß und fett und <strong>der Text fett. Ebenso werden die Schriftstile für <input>und <textarea>Elemente in den Standardstilen definiert.

Um dieses Stylesheet in Firefox anzuzeigen, fügen Sie es in Ihre Adressleiste ein: resource://gre/res/forms.css

Wie auch immer, Sie müssen diese Stile wie alle anderen Stile überschreiben, wie Sie es in diesem letzten Beispiel getan haben.

Wenn Sie sich fragen, welche anderen Stile definiert sind, überprüfen Sie die CSS-Dateien in Ihren Ressourcen. Sie können über die oben angegebene URL oder in Ihrem resOrdner im Firefox-Verzeichnis (z c:\program files\mozilla firefox\res. B. :) darauf zugreifen . Dies sind diejenigen, die sich auf die Stile normaler Seiten auswirken können:

  • html.css
  • forms.css
  • quirk.css
  • ua.css
nickf
quelle
aber <h1> nimmt Schriftstil von <body>aber <textarea>nicht
Jitendra Vyas
3
Die Stile für h1definieren keine Schriftart, daher haben Ihre bodyStile Vorrang. Die Stile für inputdefinieren einen Stil, und er ist spezifischer als Ihr Selektor, sodass er gewinnt.
Nickf
+1 für deinen Kommentar. Ich war mir nicht bewusst. Sie meinen, einige Elemente haben standardmäßig einen bestimmten Stil im Browser und können nicht durch body {....} überschrieben werden
Jitendra Vyas
1

Ich denke, was er meint, ist, dass einige Elemente spezifischer sind als andere im DOM oder einen kleineren Umfang haben. Da im Textkörper ein Textbereich vorhanden ist, überschreibt jeder für den Textbereich definierte Stil body {} -Stile. Der Standardtextstil von FF überschreibt also Ihren Körperstil, obwohl Ihr später definiert wird (normalerweise hat etwas Neueres Vorrang, aber nicht, wenn es in einem breiteren Bereich / weniger spezifisch ist).

user1072406
quelle
0

Ich habe alle möglichen Tricks ausprobiert, um Textbereiche in Mobilgeräten mit einer viel größeren Schrift als dem normalen Text zu stoppen. Es scheint, dass wenn mein Textbereich cols = "45" war, die Schrift normal war, aber sobald sie auf cols = "71" angehoben wurde, obwohl sie in den td-Tags blieb, wurde die Schrift groß.

Auf der Mozilla-Seite ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) habe ich dies gefunden

textarea {
   text-size-adjust: none;
}

Es scheint die beste Antwort für mich zu sein. Es funktioniert auf PC, Tablet und vor allem auf meinem Android-Handy.

Brian Jones
quelle