【CSS/html】inputやボタンのフォントを指定,継承させる方法

「inputを別のフォントにしたい」

「input,textarea,select,buttonが別のフォントになってる!?」

input,textarea,select,buttonのフォント(書体)を指定,継承させる方法を解説します。

font-familyを指定する

フォント(書体)を指定するにはfont-familyを指定します。

textareaテキスト
selectテキスト
buttonテキスト

<style>
input,textarea,select,button{
    font-family: "游明朝 Medium";
}
</style>
<input type="text" value="inputテキスト"><br>
<textarea>textareaテキスト</textarea><br>
<select><option>selectテキスト</option></select><br>
<button>buttonテキスト</button>

フォントについては下記も参考にしてください。

inputはfont-familyを継承しない

font-familyは本来、子孫要素へ継承します。よってbodyに指定するとサイト全体のフォントを統一させることができます。

ただし、input,textarea,select,buttonはfont-familyを継承しません。

解決方法

「*（アスタリスク）」はすべてのセレクタを示すセレクタです。これにfont-familyを指定することでinput,textarea,select,buttonにもフォントを指定できます。

*{
    font-family: "游明朝 Medium";
}

サイト内のフォントをすべて統一させる場合はこれでもいいですが、他のフォントも指定することがある場合、この方法では継承においてうまくいかないことがあります。

それを避けるために、bodyを含めて（あるいは個別に）input,textarea,select,buttonにfont-familyを指定しましょう。

body,input,textarea,select,button{
    font-family: "游明朝 Medium";
}

そもそも継承さえすればいいのですから、input,textarea,select,buttonに「font-family:inherit」を指定しましょう。「inherit」はどのCSSでも使える値で、親と同じ値にする（継承させる）値です。

body{
    font-family: "游明朝 Medium";
}
*{
    font-family: inherit;
}

「*」に継承することを指定しておけば漏れもありません。

【まとめ】inputのフォントを指定する方法

inputにfont-familyを指定する

input,textarea,select,buttonはfont-familyを継承しない

→これらか「*」に「font-family:inherit」を指定する

以上、input(テキストボックス),textarea,select,buttonのフォント(書体)を指定,継承させる方法でした。