※ ChatGPTを利用し、要約された質問です（原文：決済フォームのセレクトボックスの矢印）
決済フォームのセレクトボックスの矢印
このQ&Aのポイント
決済フォームのセレクトボックスの矢印を目立つデザインにしたいです。
付属画像の緑色のフォームは自分のコードのWEBの表示画像です。
どうしたらよいでしょうか？回答よろしくお願いいたします。
決済フォームのセレクトボックスの矢印を（付属画像のように三角の大きい目立つデザインにしたいです。 付属画像の緑色のフォームは自分のコードのWEBの表示画像です。
どうしたらよいでしょうか？回答よろしくお願いいたします。
コードは下にあります。HTML CSS
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"/>
<title>お問い合わせ</title>
<link rel="stylesheet" href="syoki.css">
<link rel="stylesheet" href="syokigazou.css">
<style>
/* 入力フォームの位置 */
.auto-style1 {
margin: auto;
text-align: center;
}
/* セレクトボックスの位置 */
.auto-style2 {
margin: auto;
text-align: center;/* セレクトボックス中央に配置 */
}
</style>
</head>
<body>
<form action ="hpform1.php" method ="post" class="auto-style1">
<p class="px-num">
支払方法：※
</p>
<div class="auto-style2">
<select name="pay" class="pay" id="pay">
<option value="">支払方法</option>
<option value="クレジットカード"<?php if(isset($pay) && $pay==="クレジットカード") { echo "selected" ;} ?>>クレジットカード</option>
<option value="銀行振込"<?php if(isset($pay) && $pay==="銀行振込") { echo "selected" ;} ?>>銀行振込</option>
</select>
</div>
</form>
</body></html>
◎◎ｃｓｓのコード（syokicss)
/* セレクトボックスのデザイン */
#pay {
border: 3px solid #63e02d; /* 枠線 */
padding: 0.5em; /* 内側の余白量 */
background-color: snow; /* 背景色 */
width: 24.3em; /* 横幅 */
height: 56px; /* 高さ */
font-size: 1.2em; /* テキスト内の表示文字サイズ */
color: #000000;
line-height: 1.2; /* 行の高さ */
}
/* 入力フォームとフォーム間のの上下の余白， */
input.email{margin:8px 0px;}
/* セレクトボックスの上下の余白， */
select.pay{margin:8px 0px;}
/* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/
.px-num{
line-height: 0px;/* 文字の行間 */
font-size: 22px;/* 文字の大さ */
font-weight: 900;/* 文字の太さ */
text-align: center;/* 文字を中央に配置 */
color: #63e02d;
}
