<textarea> ve <textfield> neden yazı tipi ailesini ve yazı tipi boyutunu gövdeden almıyor?

118

Neden Textareave textfieldolmayan alarak font-familyve font-sizevücuttan?

Burada canlı örneğe bakın 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>

Normal bir davranışsa, css'de böyle yazmalıyım. hepsinde aynı stile ihtiyacım var

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

Ve XHTML'de font stilini almayan diğer kaç öğe body {....} ?

css xhtml

— Jitendra Vyas
kaynak

76

Varsayılan olarak tarayıcılar, işletim sistemi kontrollerini veya tarayıcı kontrollerini kullanarak çoğu form öğesini (metin alanları, metin kutuları, düğmeler vb.) Oluşturur. Bu nedenle, yazı tipi özelliklerinin çoğu, işletim sisteminin şu anda kullandığı temadan alınmıştır.

Yazı tipi / metin stillerini değiştirmek istiyorsanız form öğelerini kendileri hedeflemeniz gerekir - ancak yaptığınız gibi, onları seçerek yeterince kolay olmalıdır.

Bildiğim kadarıyla yalnızca form öğeleri etkileniyor. Başımın Kapalı: input, button, textarea, select.

— BoltClock
kaynak

32

Bu davranış istenmiyorsa en doğrudan çözüm, stillerinize eklemektir textarea, input, button, select { font-family: inherit; font-size: inherit; }.

— Devvyn

@Devvyn, eklemelisiniz text-align: inheritçünkü düğmelerin metinleri genellikle ortaya hizalanır.

— Joshua Muheim

Bunun tersini nasıl yapabilirim, diğer bir deyişle, bu işletim sistemi yazı tipini tüm web sayfam / gövdemim için kullanırım?

— agirault

@agirault şunun gibi bir şey yapabilirsiniz: body {font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans "," Helvetica Neue "," Helvetica "," Arial ", sans-serif; }

— getup8

149

Bazı kontroller varsayılan olarak yazı tipi ayarlarını devralmaz. Bunu CSS'nize yerleştirerek geçersiz kılabilirsiniz:

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

— spoulson
kaynak

4

Sürüm 8'den önceki IE, devralmayı desteklemez, dolayısıyla bu işe yaramaz.

— DisgruntledGoat

6

Sanırım bu, her öğeyi tanımlamak için yalnızca çapraz tarayıcı çözümübody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }

— Jitendra Vyas

1

Bu yaklaşımın daha pratik olduğuna katılıyorum. Sadece bu inherityaklaşımı kullanarak gördüğünüz davranışı göstermek istedim .

— spoulson

Ne yazık ki Chrome (sürüm 59.0.3071.115) font-size: inherit uygulamıyor; yazı tipi ailesini belirtmeden.

— Ondrej

font-weight: inherit;kayıp.

— ceving

10

Tüm tarayıcılarda yerleşik varsayılan stil sayfaları bulunur. Bu nedenle, herhangi bir stil tanımlanmamış bir sayfa oluşturduğunuzda, <h1>etiketler büyük ve kalın olur ve <strong>metni kalın yapar. Benzer şekilde, için yazı tipi stilleri <input>ve <textarea>öğeleri varsayılan stillerde tanımlanır.

Bu stil sayfasını Firefox'ta görmek için, bunu adres çubuğunuza koyun: resource://gre/res/forms.css

Her neyse, bu son örnekte yaptığınız gibi diğer stillerde olduğu gibi bu stilleri geçersiz kılmalısınız.

Başka hangi stillerin tanımlandığını merak ediyorsanız, kaynaklarınızdaki CSS dosyalarına bakın. Bunlara yukarıdaki url aracılığıyla veya resfirefox dizinindeki klasörünüze bakarak (örneğin:) erişebilirsiniz c:\program files\mozilla firefox\res. Normal sayfaların stillerini etkileyebilecek olanlar şunlardır:

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

— nickf
kaynak

ancak <h1> yazı tipi stilini alıyor <body>ama <textarea>almıyor

— Jitendra Vyas

3

Stilleri h1bir font tanımlamaz, bu nedenle bodystilleriniz önceliklidir. Stiller inputbir stili tanımlar ve seçicinizden daha spesifiktir, bu nedenle kazanır.

— nickf

Yorumunuz için +1. Farkında değildim. bazı öğelerin tarayıcıda varsayılan olarak belirli bir stile sahip olduğunu ve vücut tarafından geçersiz

— kılınamayacağını

1

Sanırım onun kastettiği, DOM'daki bazı öğelerin diğerlerinden daha spesifik veya daha küçük bir kapsamı olduğu. Gövdenin içinde bir metin alanı bulunduğundan, metin alanı için tanımlanan herhangi bir stil gövde {} stillerinin üzerine yazacaktır. Dolayısıyla, FF'nin varsayılan metin alanı stili, sizinki daha sonra tanımlansa bile vücut stilinizin üzerine yazar (genellikle daha yeni bir şey öncelik kazanır, ancak daha geniş bir kapsamda / daha az spesifik değilse).

— user1072406
kaynak

0

Normal metinden çok daha büyük bir yazı tipi kullanarak mobil ortamda metin alanını durdurmak için her türlü hileyi denedim. Görünüşe göre metin alanım cols = "45" olduğunda yazı tipi normaldi ama cols = "71" e yükseltilir yükseltilmez, td etiketlerinin içinde kalmasına rağmen yazı tipi büyüdü.

Mozilla sayfasında ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) bunu buldum

textarea {
   text-size-adjust: none;
}

Benim için en iyi cevap gibi görünüyor. PC, tablet ve en önemlisi android telefonumda çalışıyor.

— Brian Jones
kaynak