Dlaczego <textarea> i <textfield> nie biorą rodziny czcionek i rozmiaru czcionki z treści?

118

Dlaczego Textareai textfieldnie brać font-familyi font-sizeod ciała?

Zobacz przykład na żywo tutaj http://jsbin.com/ucano4

Kod

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

Jeśli jest to normalne zachowanie, powinienem pisać w css w ten sposób. potrzebuję tego samego stylu we wszystkich

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

A z ilu innych elementów XHTML, które nie będą miały stylu czcionki body {....}?

css xhtml Jitendra Vyas
źródło

Odpowiedzi:

76

Domyślnie przeglądarki renderują większość elementów formularza (obszary tekstowe, pola tekstowe, przyciski itp.) Za pomocą elementów sterujących systemu operacyjnego lub przeglądarki. Dlatego większość właściwości czcionki pochodzi z motywu, z którego obecnie korzysta system operacyjny.

Będziesz musiał kierować reklamy na same elementy formularza, jeśli chcesz zmienić ich style czcionki / tekstu - powinno to być dość łatwe, jeśli wybierzesz je, tak jak właśnie to zrobiłeś.

O ile wiem, dotyczy to tylko elementów formularza. Od szczytu głowy: input, button, textarea, select.

BoltClock
źródło
32
Najbardziej bezpośrednim rozwiązaniem, jeśli takie zachowanie jest niepożądane, jest dodanie do stylów textarea, input, button, select { font-family: inherit; font-size: inherit; }.
Devvyn
@Devvyn, powinieneś dodać, text-align: inheritponieważ teksty przycisków często są wyrównane na środku.
Joshua Muheim
Jak inaczej, czyli użyć tej czcionki systemu operacyjnego dla całej mojej strony internetowej / treści?
agirault
@agirault, możesz zrobić coś takiego: body {rodzina czcionek: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans ”,„ Helvetica Neue ”,„ Helvetica ”,„ Arial ”, sans-serif; }
getup8
149

Niektóre kontrolki nie dziedziczą domyślnie ustawień czcionek. Możesz to zmienić, umieszczając to w swoim CSS:

textarea {
   font-family: inherit;
   font-size: inherit;
}
spoulson
źródło
4
IE przed wersją 8 nie obsługuje dziedziczenia, więc to nie zadziała.
DisgruntledGoat
6
Myślę, że jest to tylko rozwiązanie między przeglądarkami, aby zdefiniować każdy elementbody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }
Jitendra Vyas
1
Zgadzam się, to podejście jest bardziej praktyczne. Chciałem tylko zademonstrować zachowanie, które widzisz, stosując to inheritpodejście.
spoulson
Niestety Chrome (wersja 59.0.3071.115) nie stosuje rozmiaru czcionki: dziedziczenie; bez określania rodziny czcionek.
Ondrej
font-weight: inherit;brakuje.
ceving
10

Wszystkie przeglądarki mają wbudowane domyślne arkusze stylów. Dlatego kiedy tworzysz stronę bez zdefiniowanych stylów, <h1>tagi są duże i pogrubione, a <strong>tekst jest pogrubiony. Podobnie style czcionek dla elementów <input>i <textarea>są zdefiniowane w stylach domyślnych.

Aby zobaczyć ten arkusz stylów w przeglądarce Firefox, umieść go w pasku adresu: resource://gre/res/forms.css

W każdym razie musisz zastąpić te style, tak jak każdy inny styl, tak jak w ostatnim przykładzie.

Jeśli zastanawiasz się, jakie inne style są zdefiniowane, sprawdź pliki CSS w swoich zasobach. Możesz uzyskać do nich dostęp poprzez powyższy adres URL lub zaglądając do swojego resfolderu w katalogu firefox (np c:\program files\mozilla firefox\res. :) . Oto te, które mogą wpływać na style zwykłych stron:

  • html.css
  • forms.css
  • quirk.css
  • ua.css
nickf
źródło
ale <h1> bierze stylizację czcionek z, <body>ale <textarea>nie
Jitendra Vyas
3
Style dla h1nie definiują czcionki, dlatego Twoje bodystyle mają pierwszeństwo. Style dla inputdefiniują styl i są bardziej szczegółowe niż Twój selektor, więc wygrywa.
nickf
+1 dla Twojego komentarza. Nie byłam tego świadoma. masz na myśli, że niektóre elementy mają domyślnie określony styl w przeglądarce i nie mogą być nadpisane przez treść {....}
Jitendra Vyas
1

Myślę, że ma na myśli to, że niektóre elementy są bardziej szczegółowe niż inne w DOM lub mają mniejszy zakres. Ponieważ textarea istnieje wewnątrz ciała, każdy styl zdefiniowany dla textarea nadpisze style body {}. Tak więc domyślny styl textarea FF nadpisuje twój styl ciała, nawet jeśli twój jest zdefiniowany później (zwykle coś nowszego będzie miało pierwszeństwo, ale nie, jeśli ma szerszy zakres / mniej szczegółowy).

user1072406
źródło
0

Próbowałem różnych sztuczek, aby zatrzymać obszar tekstowy w telefonie komórkowym, używając znacznie większej czcionki niż zwykły tekst. Wygląda na to, że kiedy mój textarea miał cols = "45", czcionka była normalna, ale jak tylko została podniesiona do cols = "71", mimo że pozostawała wewnątrz znaczników td, czcionka urosła.

Na stronie Mozilli ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) znalazłem to

textarea {
   text-size-adjust: none;
}

Wydaje mi się, że to najlepsza odpowiedź. Działa na komputerze PC, tablecie i, co najważniejsze, na moim telefonie z Androidem.

Brian Jones
źródło