inputにfontの指定が継承されない

今まであまり意識しなかったのですが、inputとtextareaでフォントが異なると指摘を受けたので、少し調べてみました。

サンプルコード

.beforeが何もしなかった場合、.afterがfont-familyを直接適用した場合、.after2がfont-familyとfont-sizeを直接適用した場合です。
font-familyの指定はこちらのサイトを参考にさせていただきました。

HTML

<div class="before">
	<input type="text" value="ABCDEFGabcdefgあいうえお" />
	<textarea>ABCDEFGabcdefgあいうえお</textarea>
</div>
<div class="after">
	<input type="text" value="ABCDEFGabcdefgあいうえお" />
	<textarea>ABCDEFGabcdefgあいうえお</textarea>
</div>
<div class="after2">
	<input type="text" value="ABCDEFGabcdefgあいうえお" />
	<textarea>ABCDEFGabcdefgあいうえお</textarea>
</div>

CSS

body {
	font-size: 20px;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
}
.after input,
.after textarea {
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
}
.after2 input,
.after2 textarea {
	font-size: 20px;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
}

inputにfontの指定が継承されないデモページ

結果としては、

• 親要素で指定したfont系のCSSは、inputとtextareaに継承されない
• font-familyの指定がない場合、inputとtextareaでフォントが異なる模様
• inputとtextareaでフォントの指定をそろえるには、直接指定が必要

【参考サイト】

• CSSでのフォント指定について考える（2014年） – DTP Transit（Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント）