<input> tidak mewarisi font dari <body>

102

Saya memiliki bidang masukan dan label:

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

dan 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; }

Ketika kode terbuka di Firefox, font-nya tidak sama. Firebug menunjukkan bahwa keduanya "harus" mewarisi dan ketika saya melihat dihitung itu menunjukkan label menggunakan Verdana. Namun input menunjukkan itu menggunakan "MS Shell Dlg".

Adakah yang bisa menjelaskan apa yang terjadi dan mengapa tampaknya tidak mematuhi aturan CSS normal?

css Judy R
sumber
sangat menyedihkan mereka tidak melakukannya. Saya kira W3C telah memutuskan akan lebih baik membiarkan mereka ditata sebagai standar sistem daripada memaksakan gaya broswer mereka sendiri
vsync

Jawaban:

125

Itu tidak mewarisi secara default tetapi Anda dapat mengaturnya untuk mewarisi dengan css

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

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

Gabriele Petrioli
sumber
properti font otomatis mewarisi jika tidak disebutkan, lihat di sini: developer.mozilla.org/en/CSS/font
diEcho
4
@diEcho, ini berlaku untuk semua elemen selain elemen formulir, yang diwarisi dari gaya sistem saat ini sehingga mempertahankan nuansa yang familier bagi pengguna ( secara default ), tetapi dapat diganti secara manual.
Gabriele Petrioli
1
Salah atau tidak, apa yang Firebug tunjukkan kepada saya sangat membingungkan: ukuran font 12, tetapi dihitung masih menjadi 13.3333. Setelah mengatur ukuran font agar sesuai dengan jawaban Gaby, masalah saya terpecahkan: O
Jeroen
@Gaby Itu selalu sangat baik sehingga para desainer membuat semua pemikiran untuk kami para pengembang ...;)
AGuyCalledGerald
Juga jika Anda meletakkan bagian inputdalamnya label, labeltag tidak mewarisi css default
AmerllicA
16

Item formulir (input / textarea / etc) tidak mewarisi informasi font. Anda harus mengatur font-family pada item tersebut.

John Green
sumber
@jhon wat pernah kamu bilang may b benar, apakah ada dokumen standar / valid tentang ini ??
diEcho
elemen font juga tidak mewarisi warna, latar belakang, dan sebagainya. Sebenarnya, elemen font adalah hal yang paling tidak bisa diandalkan di seluruh html / css! Anda tidak dapat menentukan lebar untuk kotak masukan dan jaminan akan sama di semua browser!
Ionuț Staicu
Maksud saya elemen bentuk. Masih mengantuk :)
Ionuț Staicu
@diEcho - Sejujurnya, saya melakukan pencarian melalui spesifikasi, dan tidak melihatnya disebut di mana pun. Melihat ke 'Terkait', dan SO memberi saya tautan pertanyaan duplikat: stackoverflow.com/questions/2874813 (yang memberikan jawaban saya, meskipun juga tanpa tautan spesifikasi). Stylesheet default di Chrome mencantumkan font sebagai "-webkit-small-control;", yang berarti sudah mengganti badan, oleh karena itu lebih spesifik daripada apa pun yang disetel di badan. Hal yang sama berlaku untuk elemen TD, jika saya tidak salah. Jadi saya tidak tahu harus berkata apa selain "begitulah adanya". :)
John Green
5

Tiga tahun kemudian, saya menemukan itu aneh <input>unsur jenis reset, submitdan buttontidak mewarisi font-familydi Chrome atau Safari. Saya menemukan mereka juga tidak akan menerima bantalan.

Tetapi ketika saya mengacaukan properti tertentu, seperti background,, borderatau appearanceproperti aneh ini, maka font-familydan paddingberpengaruh, tetapi tampilan dan nuansa asli tombol hilang, yang tidak menjadi masalah jika Anda benar-benar mengubah gaya tombol.

Jika Anda menginginkan tombol tampilan asli, dengan mewarisi font-family, gunakan <button>elemen sebagai ganti <input>.

Lihat Codepen .

Stoutie
sumber
1

Saya punya masalah yang sama. Apa yang berhasil bagi saya adalah menambahkan gaya langsung ke elemen input di html. Saya membuat kode di React fyi.

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

rpd1297
sumber