プルダウンメニューのフォントサイズを変えたい

【したいこと】
プルダウンメニュー(テキスト入力可)のリストの部分（画像の赤枠の部分）のフォントサイズを変えたいです。

【わかったことと試したこと】
開発ツールで調べてみると、ユーザーエージェントシートのスタイルが適用されているようでした。
調べてみると、borderを適用してあげるといいとあって、試してみたり（うまくいきませんでした。）、「開発ツールで自動生成されたclassを見つけて、
それに対してfont-sizeを指定しては？」という回答をされていて、
それをみて探してみたのですが、私の場合はどう指定すればいいのでしょうか？
クラスらしきものが見当たらず、クラスではないですが、指定するとなると、
「#list option」かな？と思ったのですが、指定が間違っているためかと思うのですが、うまく効きません。

　どのようにすれば、（画像の赤枠の部分）のフォントサイズを変えることができますでしょうか？
小さすぎてもう少し大きくしたいです。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8">
5		<meta name="robots" content="noindex,nofollow">
6		<meta name="viewport" content="width=device-width, initial-scale=1.0">
7		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8
9		<title>デモ</title>
10
11		<style>
12			html{
13				font-size:20px;
14			}
15			body{
16				margin:30px;
17			}
18			main{
19				background-color:#f8f8f8;
20				padding:20px;
21			}
22			h1,h2{
23				color: #333;
24				font-size:22px;
25			}
26			select,input,textarea{
27				font-family : inherit;
28				font-size:20px;
29				padding:3px;
30				border:1px solid black;
31				vertical-align:middle;
32			}
33		</style>
34	</head>
35
36	<body>
37		<main>
38			<h1 style="color:black;">ＤＥＭＯ</h1>
39			<HR style="margin: 1em 0 ;">
40			    <section>	          
41			            <h2 class="card-title" style="padding-top:10px;">データ</h2>
42			            <input type="text" id="subtotal1" list="list" style="width:250px;">				
43				</section>
44		</main>
45
46		<script>
47			var data1Json=[
48				{"list":"てすとhoge","value":"1000","type":"3"},
49				{"list":"てすとhoge","value":"2000","type":"3"},
50				{"list":"てすとhoge","value":"3000","type":"3"},
51				{"list":"てすとhoge","value":"40000","type":"3"}
52			
53			];
54			Object.keys(data1Json).forEach(function(key){
55				var d=$('<datalist id="list">').append(data1Json.map(x=>$(`<option value="${x.list}"</option>`)));
56				$("input#subtotal1").append(d);      	
57			});
58		</script>
59	</body>
60</html>

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

回答4件

ベストアンサー出てますが、模擬datalistを作成したので忘備録もかねて
コードを置いておきます。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="robots" content="noindex,nofollow">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
9    <title>デモ</title>
10
11    <style>
12        html {
13            font-size: 20px;
14        }
15
16        body {
17            margin: 30px;
18        }
19
20        main {
21            background-color: #f8f8f8;
22            padding: 20px;
23        }
24
25        h1,
26        h2 {
27            color: #333;
28            font-size: 22px;
29        }
30
31        #wordListWrap {
32            width: 306px;
33            position: relative;
34        }
35
36        #inputWrap::after {
37            content: "";
38            position: absolute;
39            width: 0;
40            height: 0;
41            top: 9px;
42            right: 9px;
43            border-style: solid;
44            border-width: 20.8px 12px 0 12px;
45            border-color: #000000 transparent transparent transparent;
46            z-index: 1;
47            pointer-events: none;
48        }
49
50        input {
51            width: 300px;
52            font-family: inherit;
53            font-size: 20px;
54            padding: 3px;
55            border: 1px solid black;
56            vertical-align: middle;
57            position: relative;
58            z-index: 1;
59        }
60
61        #wordList {
62            width: 300px;
63            background-color: white;
64            padding: 3px;
65            border-left: 1px solid black;
66            border-right: 1px solid black;
67            border-bottom: 1px solid black;
68            display: none;
69            position: relative;
70            z-index: 1;
71        }
72
73        ul {
74            margin: 0;
75            padding: 0;
76            list-style: none;
77        }
78
79        li {
80            display: block;
81            /*下記を変更するとfont-sizeの調整可能*/
82            font-size: 25px;
83        }
84
85        #wordListBtnClose {
86            background-color: transparent;
87            border: none;
88            outline: none;
89            padding: 0;
90            appearance: none;
91            position: absolute;
92            top: 0;
93            left: 0;
94            width: 100vw;
95            height: 100vh;
96            z-index: 0;
97        }
98    </style>
99</head>
100
101<body>
102    <main>
103        <h1 style="color:black;">ＤＥＭＯ</h1>
104        <HR style="margin: 1em 0 ;">
105        <section>
106            <h2 class="card-title" style="padding-top:10px;">データ</h2>
107            <div id="wordListWrap">
108                <div id="inputWrap">
109                    <input type="text">
110                </div>
111                <!-- ここに一致させたいwordを追加 -->
112                <ul id="wordList">
113                    <li>あいうえお</li>
114                    <li>あかさたな</li>
115                    <li>かきくけこ</li>
116                    <li>さしすせそ</li>
117                    <li>さしみ</li>
118                </ul>
119            </div>
120        </section>
121    </main>
122    <button id="wordListBtnClose" type="button"></button>
123    <script>
124        const input = document.getElementsByTagName("input")[0];
125        const wordList = document.getElementById("wordList");
126        const li = wordList.getElementsByTagName("li");
127        const wordArr = [];
128
129        for (let i = 0, liLen = li.length; i < li.length; i++) {
130            const liTxt = li[i].innerText;
131            wordArr.push(liTxt);
132        }
133
134        input.addEventListener("focus", () => {
135            const value = input.value;
136            search(value);
137        });
138
139        input.addEventListener("input", () => {
140            const value = input.value;
141            search(value);
142        });
143
144        const search = (value) => {
145            for (let i = 0, len = wordArr.length; i < len; i++) {
146                if (!new RegExp(value).test(wordArr[i])) {
147                    li[i].innerText = "";
148                    wordList.style.display = "none";
149                }
150            }
151
152            for (let i = 0, len = wordArr.length; i < len; i++) {
153                if (new RegExp(value).test(wordArr[i])) {
154                    li[i].innerText = wordArr[i];
155                    wordList.style.display = "block";
156                }
157            }
158
159            if (wordList.style.display == "none") {
160                wordList.style.display = "block";
161                li[0].innerText = "一致するものはありません";
162            };
163
164        }
165
166        for (let i = 0, liLen = li.length; i < liLen; i++) {
167            li[i].addEventListener("click", () => {
168                input.value = li[i].innerText;
169                wordList.style.display = "none";
170            });
171        }
172
173        const closeBtn = document.getElementById("wordListBtnClose");
174
175        closeBtn.addEventListener("click", () => {
176            wordList.style.display = "none";
177        });
178
179    </script>
180</body>
181
182</html>

投稿2020/09/29 10:21

Jon_do

総合スコア1373

Miii

2020/10/01 11:16

返事が遅くなってしまいすみません。わざわざありがとうございます（；；）感動しました！！！！頂いたコードをうまく導入しようと思います！

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

ベストアンサー

ええと、select要素が表示するプルダウンメニューは、ブラウザーが動作するOSが描画を担当するので、CSSによる変更はできません。

JavaScriptとCSSを組み合わせれば、select要素とdatalist要素(内のoption要素)の内容を読み取って、(select要素自体の表示は隠してしまい)それとは別の「(CSSが適用される)プルダウンメニュー風のなにか」を表示することはできます。

自作するのは大変なので、すでに作られているものから好きなものを選んで使って下さい。カタログ風に紹介しているページがいくつも見つかります。

〔　　▼〕選択プルダウン(SELECT～OPTION)をおしゃれにするCSSスニペット13選。 | KodoCode

投稿2020/09/28 01:43

Daregada

総合スコア11990

Miii

2020/09/28 11:10

お返事ありがとうございます。プルダウンメニュー風という考え方もあるのですね。確かに、風でしたら自由に変更可能ですね！奥が深いですね。

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

今の所フォントサイズの修正は無理みたい
javasuriptで直接指定やcssで指定しても(指定自体は通る)
表示は変更されなかった。
本当の変更したいのならJQueryで模擬datalistを作るしかないんじゃないかな？
（相当手間かかるけど．．．）

投稿2020/09/27 22:37

kuma_kuma_

総合スコア2506

Miii

2020/09/28 11:13

ありがとうございます！フォントサイズを変えるだけなのに、OS描画のために、意外と大変なんですね‥

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

このデモはプルダウンが何個も表示されるイメージでしょうか？

<main>
    <h1 style="color:black;">ＤＥＭＯ</h1>
    <HR style="margin: 1em 0 ;">
    <section>
        <h2 class="card-title" style="padding-top:10px;">データ</h2>
        <select>
            <option>てすとhoge1</option>
            <option>てすとhoge2</option>
            <option>てすとhoge3</option>
            <option>てすとhoge4</option>
        </select>
    </section>
</main>

このようにしてはだめですか？

投稿2020/09/27 16:52