HTMLでテキストボックスを表示する方法にinputタグのtype属性にtextを設定する方法があります。

<input type="text">

しかし、文字の大きさや文字数、フォントを変更した際に文字が切れてしまうことがあり、そのような時のためにsize属性があります。入力する文字数が決まっている場合にはsizeを指定してあげることで、文字が切れる心配がなくなります。

<input type="text" size="5" value="５文字表示">

WordPressのCSSと競合しているようで上手く表示されませんが、このように記述することで、文字のサイズとテキストボックスの大きさをそろえることができます。

また、HTML5から利用できるようになったtype属性のnumberがあります。こちらは数値を入力するためのテキストボックスで右端の三角矢印を押すことで、数字を入れることもできます。しかし、こちらにはsize属性を指定することができません。

そこで、若干無理矢理ですが長さの単位にem（エム）を使用することで解決しようと思います。emは一文字分の長さを表す単位です。font-sizeの1pxは、文字の高さが1pxであることを示しています。font-sizeを1pxに設定しても文字の幅は1pxにならないためテキストボックスの横幅は1文字あたり0.67emぐらいに設定してみます。

<input type="number" style="width:4.27em;">

フォントやフォントサイズを変更するたびに横幅を指定し直すことはしたくないので、このような方法を取ることにしました。注意点としましては三角矢印の領域も横幅に含まれるようなので、実際には1〜3文字分程度多めに横幅を指定する必要がありそうです。

また、テキストボックスとは関係ありませんが、emを設定することで画面の大きさに応じて文字サイズを変更するといったこともできます。h1の文字の大きさが画面の大きさに合わせて自動で変わるようにCSSで記述します。

h1 {
  font-size: 3em;
  line-height: 1;
  margin-bottom: 0.5em;
}

html {
  font-size : 75%;
}

/*画面サイズ768px以上の時*/
@media screen and (min-width : 768px){
  html{ font-size : 87.5%;}
}

/*画面サイズ768px以上の時*/
@media screen and (min-width : 1024px) {
  html{ font-size : 100%};
}

この画面の大きさの区分は、スマートフォン、タブレット、PCの画面を基準に設定されています。

———————参考文献———————-
CSSで使用する単位一覧　http://www.tagindex.com/stylesheet/basic/length.html