セレクトボックス内の矢印をデザインしたい

実現したいこと

レクトボックスの矢印のデザインを変更したくて、下記のURLを参考に、自分なりにカスタマイズしてみたり、したのですが上手くいきません。
付属画像の左側が自分が書いたコードのWeb表示になります。そして画像の右側にあるようなデザインにセレクトボックスの矢印を変更したいです。
どうしたらよいでしょうか？全く同じデザインでなくても構いません。ブラウザに対応できるものが良いです。

どうしたらよいでしょうか？困っています。ご教授お願いいたします。自分の書いたコードは下にあります。

https://junpei-sugiyama.com/select-arrow/

上のURLと同じようにカスタマイズしてみたのですが、例えば、セレクトボックスをWebの真ん中に持っていくと、セレクトボックス内の矢印が左側に配置されたりしてしまします。

付属画像

◎コード

html
1<!DOCTYPE html> 
2
3<html>
4
5<head>
6<meta content="text/html; charset=utf-8"/>
7
8 <title>お問い合わせ</title> 
9 <link rel="stylesheet" href="syoki.css"> 
10 <style>
11
12 
13/* セレクトボックスの位置 */ 
14
15 .auto-style2 {
16   margin: auto;
17   text-align: center;
18 
19 }
20 
21</style>
22</head>
23<body>
24
25<form>
26    
27       <h2>支払方法：※</h2>
28       <div class="auto-style2">
29 
30      <select name="list" id="pay">
31        
32            <option value=""></option>
33              <option value="クレジットカード"<?php if(isset($pay) && $pay==="クレジットカード") { echo "selected" ;} ?>>クレジットカード</option>
34              <option value="銀行振込"<?php if(isset($pay) && $pay==="銀行振込") { echo "selected" ;} ?>>銀行振込</option>
35 
36     </select>
37            </div>
38 <p></p>
39 <p></p>
40 <p></p>       
41 
42 <span colspan="2"><input type ="submit" name ="submit"value="確認画面へ"></span>
43  
44</form>
45 </body></html>

syoki.css

css
1/* セレクトボックスのスタイル */
2
3#pay {
4    
5    border: 2px solid #63e02d;  /* 枠線 */
6    padding: 0.5em;          /* 内側の余白量 */
7    background-color: snow;  /* 背景色 */
8    width: 28.8em;             /* 横幅 */
9    height: 56px;           /* 高さ */
10    font-size: 1em;          /* テキスト内の表示文字サイズ */
11 color: #000000;
12    line-height: 1.2;        /* 行の高さ */
13  
14}

K_3578

2021/04/19 06:06

とりあえず支離滅裂な文章になってる質問文直してみよう。焦る気持ちはわかるが話はそれからだ。レクトボックス→セレクトボックスみたいな脱字とか「どうしたらよいでしょうか？」を連続で言う必要も無い >実現したいこと ↑見出しにしたかったら ###見出しにしたいテキストとすれば見出しに出来る

miyabi_pudding

2021/04/19 06:12

本当にURLを参考にしたのでしょうか？全然違うコードになっていると思いますが・・・。（appearance: none;がついていない、など）

gujhufiugho

2021/04/19 12:18

K_3578さんすみません。相当焦っていました。確かに自分でも読みにくいと思います。すみません。 miyabi_takatsukさん。参考にしたのですが、自分でカスタママイズしてみたのですが、表示がおかしな感じになったので、コードを一旦すべて消してから提示してました。すみません。

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

回答1件

ベストアンサー

リンク先の一番最初のサンプルなら、下記のCSSを追加ですね。

リンク先のコードのセレクターを変更しただけです。意味はリンク先に解説してありますのでよくよんでください。

css
1.auto-style2 {
2  position: relative;
3  width: 28.8em;
4  height: 56px;
5}
6select {
7  -webkit-appearance: none;
8  appearance: none; /* デフォルトのスタイルを無効 */
9}
10select::-ms-expand {
11  display: none; /* デフォルトのスタイルを無効(IE用) */
12}
13.auto-style2::before {
14  border-bottom: 4.5px solid red;
15  border-left: 4px solid transparent;
16  border-right: 4px solid transparent;
17  content: "";
18  position: absolute;
19  right: 9px;
20  top: 20px;
21  width: 0;
22}
23.auto-style2::after {
24  border-left: 4px solid transparent;
25  border-right: 4px solid transparent;
26  border-top: 4.5px solid red;
27  content: "";
28  position: absolute;
29  right: 9px;
30  top: 30px;
31  width: 0;
32}