ドロップダウンリストの文字サイズを大きくしたい

Question

monacaでアプリを作成しています。（実機はiPad）
ドロップダウンリストを選択した時に表示されるリストの文字サイズを大きくする方法がわかりません。
cssに、font-sizeを指定して、フォントサイズ30pxにしてみたところ、
ドロップダウン自体の文字サイズは大きくなりましたが、リスト部分が小さいままでした。
※画像の選択１～４のリストのところです。

ドロップダウンリストは以下の様に記述しました。

  <select id='listBox'>
  <option value='1'>選択１</option>
  <option value='2'>選択２</option>
  <option value='3'>選択３</option>
  <option value='4'>選択４</option>
  </select>

CSSには、以下のように記述しました。

select {
	font-size: 30px
}

ちなみに、

select.textBig {
	font-size: 30px
}

として、
<select id='listBox' class='textBig'>に変更してみましたが、リスト部分の文字サイズは変わりませんでした。

リスト部分の文字サイズを大きくする方法をご教授いただけますでしょうか？

Answer 1

見た感じoptionの中身をjavascript取り出して上から被せて別でリスト作ってるような感じなので、
そのリストに対して指定しないときかないんじゃないかなと思います。
ブラウザの開発ツールとかで階層とか自動生成されたclassとかを見つけてそれに対してfont-sizeを指定してはいかがでしょうか？

Comments

[lucky-ponta]

コメントありがとうございます。
最終的にはそれしかないのかなと思っておりますが、できることならあまりコアなところを触ることなくサイズ変更したいと思い、質問した次第です。
（どの箇所を修正すればいいのか、まだわかっておりません。そもそも修正を加えていいものかどうか…）

[m.ts10806]

コア（おそらくjs内部）を触る必要はないですよ。
自動で付与されているCSSクラスに対して自身で用意したCSSにて同名指定してフォントサイズの指定だけをしてやればOKです。

[m.ts10806]

物凄く長い間放置された質問が特に反応もないまま急に解決となり戸惑っております。
その後どのように解決とされたのでしょうか。
https://teratail.com/help/question-tips#questionTips42

Answer 2

IDのスタイル内の記述法は

<style>
#listBox {
font-size: 30px
}
</syle>

とIDの指定が可能です。試してみたください

Answer 3

30pxの後に；を付けてやってみましたか？
それかul.<classname> { font-size: 12px; }とかは？

Comments

[lucky-ponta]

コメントありがとうございます。
セミコロンを付けてみても、classname付けてみても、文字サイズは変わりませんでした・・・

[TennousuAtene]

selectタグの中にstyleを入れてみては？
こんな感じで
<select id='listBox' style="font-size: 12px;">

[TennousuAtene]

100pxとかにしてすごく大きくすれば変わっているかわかるはずです

[lucky-ponta]

select内に、直接 style=～を追記しましたが、残念ながら大きくはなりませんでした。
あまりやりたくはないですが、リスト部分はコアなところを触らないとダメなのかもしれません。

[TennousuAtene]

CSSに書くのであればボーダーの設定を変更してみては？
select{
font-size:14px;
border:1px;
}

[TennousuAtene]

ちなみに自分は
<select id='listBox' style="font-size: 12px;">
<option value='1'>選択１</option>
<option value='2'>選択２</option>
<option value='3'>選択３</option>
<option value='4'>選択４</option>
</select>
で変更しています。