【CSS】Onsen UIのons-input要素のテキストサイズを変更する

今後も使いそうだったので備忘録としてまとめ。
そこまで難しいことはしていませんが、少しだけ悩んだので…。

公式ページはこちらです。

Input React Component – Onsen UI Framework – Onsen UI
https://ja.onsen.io/v2/api/react/Input.html

なお、私の環境では React で記述していますので、こちらのページを参照していますが、もちろん他のフレームワークを使用してもOKです。

まず、React での Input 要素の書き方がこちら。

<Input
  value={this.state.text} float
  onChange={(event) => { this.changeValue(event.target.value)} }
  modifier='material'
  placeholder='氏名' />

上記の記述を Google Chrome の Developer Tools で確認すると、下記のようになっています。

<ons-input type="text" modifier="material" float="" placeholder="氏名" value="">
  <input type="text" class="text-input text-input--material" placeholder="氏名" value="">
  <span class="text-input__label text-input--material__label">氏名</span>
</ons-input>

で、本題の Input 要素の文字サイズを変更する方法ですが、ons-input に対して文字サイズを指定するのではなく、ons-input 要素内の input 要素で指定します。
具体例は下記のとおりです。

ons-input input {
  font-size: 80%;
}

私も最初、ons-input に対して font-size プロパティを指定したのですが反映されませんでした。
そのため、試しにその下の input 要素で指定したところ、きちんと文字サイズが変更されました！

何故 ons-input 要素で font-size プロパティが効かなかったのかは不明なのですが、とりあえず変更はできたので良しとします。
なお、もし上記の書き方をしても変更できなかった場合は !important を追加してみてください。

以上、Onsen UI の ons-input 要素のテキストサイズを変更する方法でした。
ご参考になれば幸いです。