セレクトボックスの三角のデザインの配置について

実現したいこと
セレクトボックスの三角のデザインのコードを書いたのですが、（付属画像１）がwebでの表示画像なのですが、メールアドレスの欄の入力フォームの位置と同じ位置（真ん中）にセレクトボックスを合わせたいのですが、セレクトボックスがどうしても右にずれてしまいます。また、仮にセレクトボックスを真ん中配置できたとしても、、三角のデザインの位置が少し左寄り過ぎる感じもします。

セレクトボックスの位置と三角の位置を適切な位置にしたいです。

**試したこと。 **
付属画像２のようにしたくて、
margin: auto;　text-align: center;を追加してみたりしたのですが、セレクトボックスが真ん中に動きません。三角のデザインのほうも、right:0.9emをそのまま消してみたりしたのですが、全然変なところに三角が来てしまって、どうにも進みません。

付属画像２

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 .auto-style1 {
15	 margin: auto;
16	 text-align: center;
17  
18 }
19
20/* セレクトボックスの位置 */ 
21
22 .auto-style2 {
23   position: relative;
24	 margin: auto;
25	 text-align: center;/* セレクトボックス中央に配置 */ 
26   width: 24.3em;
27   height: 56px;
28 }
29.auto-style2::before{
30position: absolute;
31
32top:1.4em;
33right:0.9em;
34width:0;
35height:0;
36padding: 0;
37content:"";
38border-left: 20px solid transparent;
39border-right: 20px solid transparent;
40border-top: 30px solid #48e;
41pointer-events: none;
42}
43
44
45</style>
46</head>
47
48<body>
49
50
51<form action ="hpform1.php" method ="post" class="auto-style1">
52
53 
54  <div class="auto-style1">
55 
56<p class="px-num">      
57電話番号：※
58</p>
59
60<input type="text" class="tel" name="tel" id="tel"> 
61
62   
63<p class="px-num">      
64メールアドレス：※  
65</p>  
66 
67<input type="text" class="email" name="email" id="email">
68
69<p class="px-num">   
70       支払方法：※
71      </p>
72       <div class="auto-style2">
73 
74      <select name="pay" class="pay" id="pay">
75        
76            <option value="">支払方法</option>
77              <option value="クレジットカード"</option>
78              <option value="銀行振込"</option>
79 
80     </select>
81         
82    </div>
83
84</form>
85 </body></html>
86
87
88
89

syoki.css

css
1/* 入力フォームのスタイル */
2
3#tel {
4    
5    border: 3px solid #63e02d;  /* 枠線 */
6    padding: 0.5em;          /* 内側の余白量 */
7    background-color: snow;  /* 背景色 */
8    width: 27.8em;             /* 横幅 */
9    height: 36px;           /* 高さ */
10    font-size: 1em;          /* テキスト内の表示文字サイズ */
11    line-height: 1.2;        /* 行の高さ */
12}
13
14#email {
15    
16    border: 3px solid #63e02d;  /* 枠線 */
17    padding: 0.5em;          /* 内側の余白量 */
18    background-color: snow;  /* 背景色 */
19    width: 27.8em;             /* 横幅 */
20    height: 36px;           /* 高さ */
21    font-size: 1em;          /* テキスト内の表示文字サイズ */
22    line-height: 1.2;        /* 行の高さ */
23}
24
25
26/* セレクトボックスのデザイン */
27#pay {
28   
29    border: 3px solid #48e ;  /*#63e02d 枠線 */
30    padding: 0.5em;          /* 内側の余白量 */
31    background-color: snow;  /* 背景色 */
32    width: 24.3em;             /* 横幅 */
33    height: 56px;           /* 高さ */
34    font-size: 1.2em;          /* テキスト内の表示文字サイズ */
35 color: #000000;
36    line-height: 1.2;        /* 行の高さ */
37  cursor: pointer;
38  text-overflow: ellipsis;
39  outline:none;
40  -webkit-appearance:none;
41  appearance:none;
42
43}
44/* 入力フォームの一番上の余白(namae）*/
45form.auto-style1{margin-top:50px;}
46
47/* 入力フォームとフォーム間のの上下の余白， */
48input.furigana{margin:8px 0px;}
49input.tel{margin:8px 0px;}
50input.email{margin:8px 0px;}
51
52/* セレクトボックスの上下の余白， */
53select.pay{margin:8px 0px;}
54
55
56
57/* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/
58.px-num{
59  line-height: 0px;/* 文字の行間 */
60  font-size: 22px;/* 文字の大さ */
61  font-weight: 900;/* 文字の太さ */
62  text-align: center;/* 文字を中央に配置 */
63  color: #63e02d;
64}
65

m.ts10806

2021/05/11 06:29

そもそもPHPコードが動作しない参照の仕方でPHPコードを含んだままレイアウト調整するのは無理があるのでは。モックにするか、ちゃんとPHP動かすか、どちらかにしてください。そこからがスタートです

gujhufiugho

2021/05/11 08:19

すみません。確かにそうですね。ＰＨＰのコードは消去しました。

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

回答1件

ベストアンサー

.auto-style2に固定幅を指定していることが原因だと思います。

css
1        .auto-style2 {
2            position: relative;
3            margin: auto;
4            text-align: center;
5            /* セレクトボックス中央に配置 */
6            /*width: 24.3em;*/
7            width: max-content;
8            height: 56px;
9        }