<textarea>と<textfield>が本体からfont-familyとfont-sizeを取得しないのはなぜですか？

118

なぜ、Textareaそしてtextfieldない服用font-familyし、font-size体内から？

こちらのライブ例をご覧くださいhttp://jsbin.com/ucano4

コード

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

それが通常の動作である場合は、次のようにcssで記述します。私はすべて同じスタイルが必要です

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

また、フォントスタイルを適用しないXHTMLの他の要素はいくつありbody {....}ますか。

css xhtml

— ジテンドラ・ビアス
ソース

76

デフォルトでは、ブラウザは、OSコントロールまたはブラウザコントロールを使用して、ほとんどのフォーム要素（テキストエリア、テキストボックス、ボタンなど）をレンダリングします。そのため、ほとんどのフォントプロパティは、OSが現在使用しているテーマから取得されます。

フォント/テキストのスタイルを変更したい場合は、フォーム要素自体をターゲットにする必要があります。ただし、これらを選択するだけで十分簡単です。

私の知る限り、影響を受けるのはフォーム要素のみです。私の頭の上オフ：input、button、textarea、select。

— ボルトクロック
ソース

32

この動作が望ましくない場合の最も直接的な対策は、スタイルに追加することですtextarea, input, button, select { font-family: inherit; font-size: inherit; }。

— Devvyn 2016年

@Devvyn、text-align: inheritボタンのテキストは多くの場合中央に配置されるため、追加する必要があります。

— Joshua Muheim、2018年

Webページ/本文全体にそのOSフォントを逆に使用するにはどうすればよいですか？

— アジロー

@agirault次のようなことができます：body {font-family：BlinkMacSystemFont、-apple-system、 "Segoe UI"、 "Roboto"、 "Oxygen"、 "Ubuntu"、 "Cantarell"、 "Fira Sans"、 "Droid Sans」、「Helvetica Neue」、「Helvetica」、「Arial」、sans-serif; }

— getup8

149

一部のコントロールは、デフォルトでフォント設定を継承しません。これをCSSに配置することで、これをオーバーライドできます。

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

— Spoulson
ソース

4

バージョン8より前のIEは継承をサポートしていないため、機能しません。

— DisgruntledGoat

6

これは、すべての要素を定義するクロスブラウザーソリューションにすぎないと思いますbody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }

— Jitendra Vyas 2010年

1

私は同意します、そのアプローチはより実用的です。私は、このinheritアプローチを使用して、あなたが見ている振る舞いを示したかっただけです。

— スポールソン2010年

Unfortunatelly chrome（バージョン59.0.3071.115）はfont-size：inheritを適用していません。font-familyを指定せずに。

— Ondrej 2017

font-weight: inherit;不足している。

— 2017年

10

すべてのブラウザには、デフォルトのスタイルシートが組み込まれています。そのため、スタイルをまったく定義せずにページを作成する<h1>と、タグが大きく太字になり<strong>、テキストが太字になります。同様に、<input>および<textarea>要素のフォントスタイルは、デフォルトのスタイルで定義されています。

Firefoxでこのスタイルシートを表示するには、これをアドレスバーに配置します。 resource://gre/res/forms.css

とにかく、最後の例で行ったような他のスタイルと同じように、これらのスタイルをオーバーライドする必要があります。

他にどのようなスタイルが定義されているのか疑問に思っている場合は、リソースのCSSファイルを確認してください。上記のURLを介して、またはresfirefoxディレクトリ（例：）内のフォルダーを調べることで、これらにアクセスできますc:\program files\mozilla firefox\res。これらは通常のページのスタイルに影響を与える可能性があるものです：

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

— ニック
ソース

しかし、<H1>からフォントスタイルを取っている<body>が、<textarea>ではない

— Jitendra Vyasさん

3

のスタイルh1はフォントを定義しないため、bodyスタイルが優先されます。のスタイルはスタイルをinput定義し、セレクターよりも具体的であるため、優先されます。

— nickf

コメントの+1。知らなかった。一部の要素はデフォルトでブラウザの特定のスタイルを持ち、本文{....}でオーバーライドできないことを意味します

— Jitendra Vyas

1

彼が意味するところは、いくつかの要素はDOMの他の要素よりも具体的であるか、スコープが小さいということです。textareaはbodyの内部に存在するため、textareaに定義されたスタイルはbody {}スタイルを上書きします。そのため、FFのデフォルトのtextareaスタイルは、後で定義されていても、ボディスタイルを上書きします（通常、より新しいスコープが優先されますが、より広いスコープ/特定性が低い場合は優先されません）。

— ユーザー1072406
ソース

0

通常のテキストよりもはるかに大きいフォントを使用して、モバイルでtextareaを停止するためにあらゆる種類のトリックを試しました。私のtextareaがcols = "45"の場合、フォントは通常のようでしたが、cold = "71"に引き上げられるとすぐに、tdタグ内に留まっているにもかかわらず、フォントが大きくなりました。

Mozillaページ（https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust）でこれを見つけました

textarea {
   text-size-adjust: none;
}

それは私にとって最良の答えのようです。PC、タブレット、そして最も重要なのは私のAndroidフォンで動作します。

— ブライアン・ジョーンズ
ソース