css textareaとinputの書体を統一

指定をしないとtextareaとinputで書体が異なるっぽい。ブラウザの問題かもしれない。

作成日:2018-12-19, 更新日:2019-03-20

基本

フォントの指定をいれないと「input、textarea」と他のタグで書体が異なるってコトはなんとなく記憶にあった。
でも「input」と「textarea」が同じ書体ではなく、異なる書体ってコトには気付かなかった。

divを基本として、書体の指定をいれないといけなさそうな気がするヤツらとを比較。
画像の左が指定ありで、右が指定無し。
※明朝系で比較

・tableタグ、リストタグ（ulやdl関連）は書体の指定は無くても良かった。
・preタグは引用を表すタグだから書体が異なるのは当然かもしれない。
・formタグで使うヤツらがダメっぽい。

▼使ったソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body {
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-size: 1.5rem;
      }
      
      button, input, select, textarea, pre, th, td, li, dt, dd {
        font-family: inherit;
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div>あいうえおabc</div>
    <input type="text" value="あいうえおabc" /><br />
    <textarea>あいうえおabc</textarea><br />
    <select><option>あいうえおabc</option></select><br />
    <button>あいうえおabc</button>
    <table>
      <tr><th>あいうえおabc</th></tr>
      <tr><td>あいうえおabc</td></tr>
    </table>
    <pre>あいうえおabc</pre>
    <ul><li>あいうえおabc</li></ul>
    <dl>
      <dt>あいうえおabc</dt>
      <dd>あいうえおabc</dd>
    </dl>
  </body>
</html>

「button, input, select, textarea, pre」だけに「font-family」と「font-size」を指定してあげれば良さげ。

・上記のような単純なHTMLなら「*{}」でフォント指定するほうがラクだったりする。
・親要素のフォントを子に継承させるなら「*{}」は使わずに「inherit」で継承させてあげる。