<input>は<body>からフォントを継承しません

102

入力フィールドとラベルフィールドがあります。

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

および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; }

Firefoxでコードを開くと、フォントが異なります。Firebugは、継承する必要があることを示し、計算結果を見ると、ラベルがVerdanaを使用していることを示しています。ただし、入力は「MS Shell Dlg」を使用していることを示しています。

誰が何が起こっているのか、なぜそれが通常のCSSルールに従っていないように見えるのか説明できますか？

css

— ジュディR
ソース

とても悲しいことです。私は、W3Cが、それはシステムのデフォルトとしてではなく、彼らに自分のbroswerスタイリングを強制的にスタイリングするためにそれらを残す方が良いでしょう決めていたと思います

— VSYNC

125

デフォルトでは継承しませんが、cssで継承するように設定できます

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

デモ：http : //jsfiddle.net/gaby/pEedc/1/

— ガブリエレ・ペトリオーリ
ソース

フォントプロパティの自動継承それが記載されていない場合は、こちらを参照してください。developer.mozilla.org/en/CSS/font

— diEcho

4

@diEcho、これはフォーム要素以外のすべての要素に当てはまり、現在のシステムスタイルから継承するため、ユーザーは使い慣れた感触を維持しますが（デフォルトでは）、手動でオーバーライドできます。

— ガブリエレペトリオーリ

1

間違っていてもいなくても、Firebugが表示していたのは非常にわかりにくいものでした。フォントサイズ12ですが、計算すると13.3333になります。Gabyの回答に類似したフォントサイズを継承するように設定した後、私の問題は解決されました：O

— Jeroen

@Gabyデザイナーは常に私たちの開発者のためにすべての考えを立てるので、とても良いです...;）

— AGuyCalledGerald 2012年

また、inputinsideを指定したlabel場合、labelタグはデフォルトのcssを継承しません

— AmerllicA

16

フォームアイテム（inputs / textarea / etc）はフォント情報を継承しません。これらのアイテムにfont-familyを設定する必要があります。

— ジョン・グリーン
ソース

@jhon watこれまで本当のことを言っているかもしれませんが、これに関する標準/有効なドキュメントはありますか？

— diEcho、

フォント要素は、色、背景なども継承しません。実際、フォント要素はhtml / css全体で最も信頼性の低いものです！入力ボックスの幅を指定することはできず、すべてのブラウザで同じになることが保証されます！

— Ionuț Staicu

フォーム要素を意味します。まだ眠い:)

— Ionuț Staicu

@diEcho-正直なところ、私は仕様を検索しましたが、どこにも呼び出されていません。'Related'を見直すと、SOが重複する質問リンクを提供しています： stackoverflow.com/questions/2874813（これは私の回答ですが、スペックリンクもありません）。Chromeのデフォルトのスタイルシートでは、フォントは「-webkit-small-control;」としてリストされています。つまり、すでに本文をオーバーライドしているため、本文に設定されているものよりも具体的です。同じことがTD要素にも当てはまります。だから、「そういうふうに」以外に何を言えばいいのかわかりません。：）

— ジョングリーン

5

三年後、私はそれを奇妙な発見だ<input>タイプの要素をreset、submitとbutton継承されないfont-familyクロムまたはSafariで。私も彼らがパディングを受け取らないことを発見しました。

しかし、私ある種の特性、等と混乱する場合background、borderまたはこの奇妙なappearance、プロパティ、font-familyおよびpadding効果を持っていますが、ボタンのネイティブルック＆フィールは、あなたが完全にボタンをモデルチェンジしている場合は問題ではありませんこれは、失われます。

を継承したネイティブな外観のボタンが必要な場合font-familyは、<button>ではなく要素を使用します<input>。

Codepenを参照してください。

— スタウティー
ソース

1

同じ問題がありました。私にとってうまくいったのは、htmlのinput要素にスタイルを直接追加することでした。私はReact fyiでコーディングしています。

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

— rpd1297
ソース