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

2015.01.30

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

サンプルコード

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

HTML

1
2
3
4
5
6
7
8
9
10
11
12
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
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でフォントの指定をそろえるには、直接指定が必要

　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031