optionタグの⌵の大きさを変えたい

Question

optionタグの大きさを変えたいのですが、cssで指定できずにいます。
⌵の大きさだけを大きくしたいです。

試したこと
font-sizeを使って大きくすると文字も大きくなってしまうのでＮＧです。

<div class="container">
        <p>子供:</p>
        <select>
            <option>1名</option>
            <option>2名</option>
            <option>3名</option>
            <option>4名</option>
            <option>5名</option>
            <option>6名</option>
        </select>
    </div>

Comments

[m.ts10806]

>optionタグの初期値もググったのですが
普通に出てきますが、これとタイトルの要件はどう関係しますか？

[Larkiwing]

初期値に!importantを使えばサイズ変更可能になるかなと思いました。

[m.ts10806]

「自身を試したこと」も含めて、質問を編集して具体的に表記してください。
読むのは事情を知らない赤の他人です。
書いてないことは伝わりませんし、「わかっている前提」で書いても結局正しくは伝わりません。
「optionタグの初期値」で伝わる印象は「セレクトボックスに初期値を設定したいの？」です。

[Larkiwing]

質問の仕方が悪かったです。すみません。
⌵の大きさだけを大きくしたいです。

Answer 1

optionタグの大きさを変えたいのですが

「<option>の大きさ」なるものが、そもそも存在しません。

<option>はあくまでリストを作成するためのもので、それ自体は表示されません。

コンテンツカテゴリ なし（MDNより）

Comments

[Larkiwing]

回答ありがとうございます。
optionタグはそもそも大きさを変更することができないのですね。
勉強になります。

[maisumakun]

いえ、肉眼で見えるのはあくまで<select>です。<option>自体が表示されることはありません。

[Larkiwing]

あ、selectタグなんですね。( ..)φメモメモ

Answer 2

CSSフレームワーク（特にMaterialDesign対応がのぞましい）の組み方を見ると参考になるかもしれません。
Materialize
Material-UI

おおよそは、selectタグそのものを使うのではなく
セレクトボックスっぽいものを組んでそういう動きをさせているように見受けられます。
その下向き矢印に限らず全て好みにできます。
（利用者はselectタグを使い指定のclassを入れたり、JavaScriptのメソッドを呼び出すだけ）

Comments

[Larkiwing]

多種多様な書き方があるんですね。
回答ありがとうございます。('◇')ゞ

[m.ts10806]

利用者観点で言うと「項目を選択できればいい」ので手法は問わないと思います。

Answer 3

既定の⌵マークの大きさを設定するプロパティはないようです。

appearance: none; で消すことはできるので、疑似要素を使って自前で⌵マークを作成することになります。

例えば、下記などが参考になるでしょう。

select optionをCSSでカスタマイズする方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

Comments

[Larkiwing]

回答ありがとうございます。
疑似要素を使って再チャレンジしてみます。