selectのプルダウンメニューに対してのみスタイルを適用させたい

selectのプルダウンメニューに対してのみスタイルを適用させるにはどうすれば良いでしょうか。

例えば以下のようなHTMLは、selectに表示される文字のフォントは36pxに、selectのプルダウンを表示させるときには、そのプルダウンの文字フォントは24pxになることを意図したものですが、この場合、focusしたときのセレクトメニュー自体のfont-sizeが小さくなってしまいます。

HTML
1<HTML>
2
3	<head>
4	</head>
5
6	<body>
7		
8		<div class="outer" >
9			<p class="inner form_label">Country:</p>
10			<select  class="countryselection"  name="country" placeholder="" required>
11				<option value="testA">testA</option>
12				<option value="testB">testB</option>
13				<option value="testC">testC</option>
14			</select>
15			</select>
16		</div>
17
18		<style>
19		.countryselection{
20				font-size:36px;
21			}
22
23		.countryselection:focus{
24			font-size:20px;
25		}
26		</style>
27
28	</body>
29</HTML>
30

あるいは、もっとシンプルにoptionに対してだけ20pxにしようとしてもうまく行きませんでした。(optionに対してはcssが適用されません)

HTML
1<HTML>
2
3	<head>
4	</head>
5
6	<body>
7		
8		<div class="outer" >
9			<p class="inner form_label">Country:</p>
10			<select  class="countryselection"  name="country" placeholder="" required>
11				<option value="testA">testA</option>
12				<option value="testB">testB</option>
13				<option value="testC">testC</option>
14			</select>
15			</select>
16		</div>
17
18		<style>
19		.countryselection{
20				font-size:36px;
21			}
22
23		option{
24			-webkit-appearance: none;
25			-moz-appearance: none;
26			appearance: none;
27			font-size:20px;
28		}
29		</style>
30
31	</body>
32</HTML>
33

ご教示いただけますと幸いです。

行動規範の内容に同意します

回答1件

electに表示される文字のフォントは36pxに、selectのプルダウンを表示させるときには、そのプルダウンの文字フォントは24pxになることを意図したものですが、

コード上は20pxになっています。
いずれにしても、「フォーカスしたら20pxになる」はできてますね。

もっとシンプルにoptionに対してだけ20pxにしようとしてもうまく行きませんでした。(optionに対してはcssが適用されません)

されます。

css
1option{
2	background-color:yellow;
3}
4
5option:nth-child(1){
6    font-size:50px;
7}
8option:nth-child(2){
9    font-size:25px;
10    background-color:green;
11    color:white;
12}
13option:nth-child(3){
14    font-size:2px;
15}