monacaにてons-inputのフォントサイズを変更したい

Question

前提・実現したいこと

monacaでHTMLとCSSを使用しています．

アプリ内で時間入力等を行いたく，
row,colを使用してテーブルを作成し，
ある1つのcolの中で時間入力をしようとしています．

そこで，
<ons-input>で入力された文字と反応する範囲を
行の縦幅と同じにしたいのですが，できませんでした．

どこで指定すれば実現できるのか，教えて下さい．

発生している問題・エラーメッセージ

デフォルトの文字の大きさのままで見づらくなっています．

ただの文字列なら行の縦幅に合わせることが
できたのですが，inputを使用したところは
ずっとそのままで，反応するのもその小さな文字が
表示されるところだけです．

該当のソースコード

<div id="table">
  <ons-row class="tableRow">
    <ons-col class="tableCell">
      <ons-input type="time" id="inputTime"></ons-input>
    </ons-col>
    <ons-col>Col</ons-col>
  </ons-row>
</div>

#table{
  position: absolute;
  top: 10%;
  width: 100vw;
  height: 100vh;
}

#inputTime{
  position: relative;
  width: 100%;
  height: 100%;
}

.tableRow {
  position: absolute;
  font-size: 140%;
}

.tableCell{
  position: relative;
  width: 100%;
  height: 100%;
}

試したこと

すべてのidとclassのfont-sizeを変更してみましたが
だめでした．

Answer 1

ons-inputは以下のように変換されます。

※Androidの場合

<ons-input type="time" id="inputTime" modifier="material">
    <input type="time" class="text-input text-input--material">
    <span class="text-input__label text-input--material__label"></span>
</ons-input>

※iOSの場合

<ons-input type="time" id="inputTime">
    <input type="time" class="text-input">
    <span class="text-input__label"></span>
</ons-input>

共通のクラスtext-inputのfont-sizeを変更します。
掲載のコードのままではズレなどが発生するので、ご自身で調整してください。

.text-input {
  height: 48px;
  font-size: 48px;
}

Comments

[退会済みユーザー]

実現できました！ありがとうございます！
onsenUIはそのように，多数のタグを組み合わせて
なっているんですね．．．
丁寧に教えていただき，わかりやすかったです！
ほんとうにありがとうございました．

Answer 2

monacaの知識はないのですが、CSS観点で挙げてみます。
「#inputTime」に対して、CSSを指定してみるといかがでしょうか?

#table{
  position: absolute;
  top: 10%;
  width: 100vw;
  height: 100vh;
}

#inputTime{
  position: relative;
  width: 100%;
  height: 100%;
}

.tableRow {
  position: absolute;
  font-size: 140%;
}

.tableCell{
  position: relative;
  width: 100%;
  height: 100%;
}

/* 追加 */
#inputTime {
  /* [1] 140%を指定してみる */
  font-size: 140%;

  /* [2] pxで指定してみる。16px以上にしないと画面がズームされるかも */
  /* font-size: 14px; */

  /* [3] inheritを指定し、親要素の値を継承 */
  /* font-size: inherit; */
}

Comments

[退会済みユーザー]

回答ありがとうございました．
残念ながら，試したところ実現しませんでした．
ご指摘通りに最後に記述しても駄目でした．
今回は，otak-labさんのやり方で解決致しました．
また，他の質問でもお世話になると思うので
そちらでもよろしくお願い致します．