<input>, yazı tipini <body> 'den devralmaz

103

Giriş ve etiket alanlarım var:

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

ve CSS:

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm  { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm  { font-size:0.9em; margin:0 0 3px 3px; }

Kod Firefox'ta açıldığında yazı tipleri aynı değildir. Firebug hem miras alması gerektiğini "gösteriyor ve hesaplananlara baktığımda etiketin Verdana'yı kullandığını gösteriyor. Ancak giriş "MS Shell Dlg" kullandığını gösteriyor.

Neler olduğunu ve neden normal CSS kurallarına uymadığını açıklayan var mı?

css

— Judy R
kaynak

Yapmamaları çok üzücü. Sanırım W3C, kendi tarayıcı stillerini üzerlerine zorlamak yerine, onları sistemin varsayılanı olarak biçimlendirilmeleri için bırakmanın daha iyi olacağına karar vermişti

— vsync

127

Varsayılan olarak devralmaz, ancak css ile devralacak şekilde ayarlayabilirsiniz.

input, select, textarea, button{font-family:inherit;}

demo: http://jsfiddle.net/gaby/pEedc/1/

— Gabriele Petrioli
kaynak

font özelliği otomatik miras, eğer bahsedilmediyse, buraya bakın: developer.mozilla.org/en/CSS/font

— diEcho

4

@diEcho, bu, mevcut sistem stilinden miras alınan form öğelerinin yanı sıra tüm öğeler için geçerlidir, böylece kullanıcıya tanıdık gelen bir his verirler ( varsayılan olarak ), ancak manuel olarak geçersiz kılınabilirler.

— Gabriele Petrioli

1

Yanlış ya da değil, Firebug'ın bana gösterdiği şey çok kafa karıştırıcıydı: yazı tipi boyutu 12, ancak hesaplandığında yine de 13.3333 oldu. Yazı tipi boyutunu, Gaby'nin cevabına benzer şekilde miras alacak şekilde ayarladıktan sonra sorunum çözüldü: O

— Jeroen

@Gaby Tasarımcılar biz geliştiriciler için tüm düşünmeyi her zaman çok iyi yapıyor ...;)

— AGuyCalledGerald

Eğer koymak Ayrıca eğer inputiçini label, labeletiket değil devralır varsayılan css yapar

— AmerllicA

16

Form öğeleri (girişler / metin alanı / vb.) Yazı tipi bilgilerini devralmaz. Bu öğelerde yazı tipi ailesini ayarlamanız gerekecek.

— Yeşil John
kaynak

@jhon wat her zaman doğru olabilir, bununla ilgili herhangi bir standart / geçerli belge var mı?

— diEcho

yazı tipi öğeleri ayrıca rengi, arka planı vb. miras almaz. Aslında font öğeleri html / css'deki en güvenilmez şeydir! Bir giriş kutusu için bir genişlik belirleyemezsiniz ve garanti tüm tarayıcılarda aynı olacaktır!

— Ionuț Staicu

Biçim öğeleri demek istiyorum. Hala uykulu :)

— Ionuț Staicu

@diEcho - Dürüst olmak gerekirse, özellikler üzerinden bir arama yaptım ve hiçbir yerde çağrıldığını görmüyorum. 'Related' kısmına baktığımda SO bana yinelenen bir soru bağlantısı veriyor : stackoverflow.com/questions/2874813 (bu, spesifik bağlantıları olmasa da cevabımı verir). Chrome'daki varsayılan stil sayfası, yazı tipini "-webkit-small-control;" olarak listeler; bu, zaten gövdeyi geçersiz kıldığı anlamına gelir, bu nedenle gövde üzerinde ayarlanan herhangi bir şeyden daha spesifiktir. Aynı şey yanılmıyorsam TD elemanları için de geçerli. Bu yüzden "işte böyle" dışında ne söyleyeceğimi bilmiyorum. :)

— John Green

5

Üç yıl sonra, bunu garip buluyorum <input>türlerinin öğelerini reset, submitve buttondevralmaz font-familyChrome veya Safari. Onların da dolgu almayacaklarını keşfettim.

Ama bazı özellikleri gibi olan bela background, borderya bu tuhaf appearanceardından özelliği, font-familyve paddingetkiye sahip, ama düğmenin yerli görünüm ve tamamen düğmeleri restyling eğer bir sorun değildir, hangi kaybolur.

Yerel bir seyir düğmeye istiyorsanız, miras ile font-familykullanmak <button>yerine elemanı <input>.

Codepen'e bakın .

— Stoutie
kaynak

1

Ben de aynı sorunu yaşadım. Benim için işe yarayan şey, stili doğrudan html'deki giriş öğesine eklemekti. React'te kod yazıyorum.

<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />

— rpd1297
kaynak