safariのみselectにCSSが効かない

前提

selectタグでドロップダウンメニューを内包したWebサイトを作っています。

実現したいこと

safariを使った時だけ、selectにCSSが効いていないように感じます。また、ドロップダウンメニューの位置もずれて表示されています。これをFirefoxやChromeのブラウザと同じようにしたいです。

該当のソースコード

searchFromMakers.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
6
7<title>searchFromMakers</title>
8<style>
9#searchFromMakers{
10  display: flow-root;/*prevent margin offset*/
11  box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5);
12  width: 415px;
13}
14#searchFromMakers h1{
15  margin: 0;
16  margin-left: 15px;
17  color: rgb(121, 121, 121, 0.5);
18}
19.options{
20  display: flex;
21  padding-left: 10px; 
22  margin-top: 10px;
23}
24.options p{
25  margin: 0;
26  padding-left: 10px;
27}
28.options select{
29  margin-left: 5px;
30  color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/
31}
32/*_::-webkit-full-page-media, :root, .options select{/*0803*/
33  /*margin-left: 5px;
34  color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/
35/*}*/
36#showLine{
37  display: flex;
38  background-color: rgb(121, 121, 121, 0.1);
39  padding-left: 10px;
40  margin-top: 20px;
41}
42.carType_mini{
43  width: 122px;
44  margin: 5px;
45}
46.carType_mini img{
47  border: 1px solid #797979;
48}
49.lower_mini{
50  display: flex;
51  justify-content: space-between;
52  height: 20px;
53}
54.lower_mini p{ 
55  width: 100%;
56  margin: 0;
57  font-size: 12px;
58}
59input[type=checkbox] {
60display: none;
61}
62.checkbox{
63    box-sizing: border-box;
64    display: inline-block;
65    margin-right: 10px;
66    position: relative;
67    width: 15px;
68    cursor: pointer;
69}
70.checkbox::before {
71    border: 1px solid #797979;
72    content: '';
73    display: block;
74    height: 16px;
75    left: 5px;
76    margin-top: -8px;
77    position: absolute;
78    top: 50%;
79    width: 16px;
80}
81.checkbox::after {
82    border-right: 3px solid #ed7a9c;
83    border-bottom: 3px solid #ed7a9c;
84    content: '';
85    display: block;
86    height: 9px;
87    left: 10px;
88    margin-top: -7px;
89    opacity: 0;
90    position: absolute;
91    top: 50%;
92    transform: rotate(45deg);
93    width: 5px;
94}
95input[type=checkbox]:checked + .checkbox::after {
96    opacity: 1;
97}
98
99#optionSearch h2{/*0723 ここが効いていない*/
100margin: 0;
101border-left: 5px solid red;
102padding-left: 10px;
103color: red;
104}
105select{
106cursor: pointer;
107}
108.options, .mission{/*同じだから消せる*/
109  display: flex;
110  padding-left: 10px;
111  margin-top: 10px;
112}
113.options p{/*同じだから消せる*/
114  margin: 0;
115  padding-left: 10px;
116}
117.options select{/*同じだから消せる*/
118  margin-left: 5px;
119  color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/
120}
121.mission p{/*同じだから消せる*/
122  padding-left: 10px;
123}
124
125/*toggle switch*/
126.toggle {
127  position: relative;
128  width: 90px;
129  height: 24px;
130  margin-top: 15px;
131  margin-left: 15px;
132  user-select: none;
133  cursor: pointer;
134}
135.toggle input[type=checkbox] {
136  display: none;
137}
138.toggle span {
139  position: absolute;
140  top: 7px;
141  font-size: 12px;
142  font-weight: bold;
143  line-height: 1;
144  -webkit-transition: 0.2s ease-out;
145  transition: 0.2s ease-out;
146}
147.toggle span:nth-of-type(1) {
148  right: 16px;
149  color: rgba(0, 0, 0, 0.175);
150}
151.toggle span:nth-of-type(2) {
152  left: 16px;
153  color: white;
154  z-index: 2;
155}
156.toggle.checked span:nth-of-type(1) {
157  right: 15px;
158  color: white;
159  z-index: 2;
160}
161.toggle.checked span:nth-of-type(2) {
162  left: 15px;
163  color: rgba(0, 0, 0, 0.175);
164}
165.toggle:before {
166  content: "";
167  position: absolute;
168  top: 0;
169  left: 0;
170  width: 100%;
171  height: 100%;
172  border-radius: 50px;
173  display: block;
174  background: #FFF;
175  -webkit-transition: 0.2s ease-out;
176  transition: 0.2s ease-out;
177  border: 1px solid rgb(121, 121, 121, 0.5);
178}
179.toggle:after {
180  content: "";
181  position: absolute;
182  width: 45px;
183  height: 24px;
184  display: block;
185  border-radius: 50px;
186  background: #336666;
187  box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3);
188  -webkit-transition: 0.2s ease-out;
189  transition: 0.2s ease-out;
190  margin-top: 1px;/*prevent the effect of border*/
191}
192.toggle.checked:before {
193  background: #FFF;
194}
195.toggle.checked:after {
196  left: 46px;/*moving*/
197  box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5);
198}
199.searchButton{/*同じから消す*/
200margin: 0 auto;/*center the box*/
201margin-bottom: 20px;
202text-align: center;/*center the a elements a*/
203background: #336666;
204padding-top: 10px;
205width: 50%;
206height: 35px;
207}
208.searchButton a{/*同じから消す*/
209text-decoration: none;
210color: #FFF;
211}
212.searchButton img{/*同じから消す*/
213width: 15px;
214height: 15px;
215margin-left: 10px;
216}
217
218@media (min-width: 1025px) {/*PC版*/
219}
220
221
222@media screen and  (max-width:1024px) {/*スマホ・タブレット版*/
223}
224
225</style>
226
227</head>
228<body>
229<div id="searchFromMakers">
230  <h1>メーカから探す</h1>
231
232  <div class="options">
233      <p>メーカー</p>
234
235      <select name="maker" onchange="changeColor(this)">
236        <option class="example1" value="">日産</option>
237        <option id="nissan">日産</option>
238        <option id="toyota">トヨタ</option>
239        <option id="matsuda">マツダ</option>
240        <option id="daihatu">ダイハツ</option>
241        <option id="suzuki">スズキ</option>
242      </select>
243      <p>車種</p>
244      <select name="model" onchange="changeColor(this)">
245        <option id="example3" value="">軽自動車</option>
246        <option id="kei">軽自動車</option>
247        <option id="compact">コンパクトカー</option>
248        <option id="miniban">ミニバン</option>
249        <option id="sedan">セダン</option>
250        <option id="qube">クーペ</option>
251        <option id="stationWagon">ステーションワゴン</option>
252        <option id="SUV">SUV・クロカン</option>
253        <option id="openCar">オープンカー</option>
254        <option id="oneBox">ワンボックス</option>
255      </select>
256    </div>
257
258  <div id="showLine">
259  <div class="carType_mini">
260    <img src="assets/img/nissan_dayz_roox.png" alt="nissan_dayz_roox">
261    <div class="lower_mini">
262     <p>デイズ　ルークス</p>
263     <input type="checkbox" id="days_roox_check" name="check"><label for="days_roox_check" class="checkbox"></label>
264    </div>
265  </div>
266  <div class="carType_mini">
267    <img src="assets/img/nissan_dayz.png" alt="nissan_dayz">
268    <div class="lower_mini">
269     <p>デイズ</p>
270     <input type="checkbox" id="dayz_check" name="check"><label for="dayz_check" class="checkbox"></label>
271    </div>
272  </div>
273  <div class="carType_mini">
274    <img src="assets/img/nissan_clipper.png" alt="nissan_clipper">
275    <div class="lower_mini">
276     <p>クリッパー</p>
277     <input type="checkbox" id="clipper_check" name="check"><label for="clipper_check" class="checkbox"></label>
278    </div>
279  </div>
280  </div>
281
282  <div id="optionSearch">
283    <h2>オプション検索</h2>
284    <div class="options">
285      <p>排気量　</p>
286      <select name="displacement" onchange="changeColor(this)">
287        <option id="example2" value="">660CC</option>
288        <option id="1500">1500CC</option>
289        <option id="2000">2000CC</option>
290        <option id="3000">3000CC</option>
291      </select>
292    </div>
293    <div class="mission">
294      <p>AT/MT</p>
295      <div class="toggle">
296        <input type="checkbox" name="check" />
297        <span>MT</span>
298        <span>AT</span>
299      </div>
300    </div>
301  </div>
302
303  <div class="searchButton">
304    <a href="history.html"><span>この条件で探す</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a>
305  </div>
306</div>
307
308<script type="text/javascript">
309'use strict';
310
311//options
312function changeColor(hoge){
313    if( hoge.value == 0 ){
314        hoge.style.color = '';
315    }else{
316        hoge.style.color = 'black';
317    }
318}
319
320//toggle switch
321$(".toggle").on("click", function() {
322  $(".toggle").toggleClass("checked");
323  if(!$('input[name="check"]').prop("checked")) {
324    $(".toggle input").prop("checked", true);
325  } else {
326    $(".toggle input").prop("checked", false);
327  }
328});
329
330</script>
331</body>
332
333</html>