※ ChatGPTを利用し、要約された質問です（原文：セレクトボックスの矢印を大きな▼の緑色の矢印にした）
セレクトボックスの矢印を大きな緑色の矢印にしたいです
このQ&Aのポイント
セレクトボックスの矢印を大きな緑色の矢印にしたいですが、入力フォームとセレクトボックスの横幅と縦幅は変更せずに実現したいです。
レスポンシブ対応に苦戦しているので、コードを整理しました。付属画像のようなセレクトボックスのデザインにしたいです。
以下のHTMLとCSSのコードを使用しています。回答をお願いいたします。
セレクトボックスの矢印を大きな▼の緑色の矢印にした
同じような質問ですいません。 入力フォームとセレクトボックスの横幅と縦幅を変更せずに セレクトボックスの矢印を大きな▼の緑色の矢印にしたいです。
何度も同じ質問してすみません。レスポンシブ対応が上手くいかなかったので、少しコードを整理しました。(前回と少し違うコードになります）。
付属画像のような感じにしたいです。
コードは以下にあります。回答よろしくお願いいたします。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="box.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">
<div class="auto-style1">
<p class="px-num">
メールアドレス：※
</p>
<input type="text" class="email" name="email" id="email" value="<?php if(isset($email)){ echo $email; } ?>"/>
</div>
<p class="px-num">
支払方法：※
</p>
<div class="auto-style2">
<select name="pay" class="pay" id="pay">
<option value="">支払方法</option>
<option value="クレジットカード"<クレジットカード></option>
</select>
</div>
</form>
</body></html>
◎◎入力フォームとセレクトボックスのｃｓｓ（boxcss)
/* 入力フォームのスタイル */
#email {
margin:0 auto;/* レスポンシブ対応中央 */
text-align: center;/* レスポンシブ対応中央 */
border: 3px solid #63e02d; /* 枠線 */
padding: 0.5em; /* 内側の余白量 */
background-color: snow; /* 背景色 */
width: 29.3em; /* 横幅 */
height: 56px; /* 高さ */
font-size: 1em; /* テキスト内の表示文字サイズ */
line-height: 1.2; /* 行の高さ */
box-sizing: border-box;/* レスポンシブ対応中央 */
}
/* セレクトボックスのデザイン */
#pay {
margin:0 auto;/* レスポンシブ対応中央 */
text-align: center;/* レスポンシブ対応中央 */
border: 3px solid #63e02d ; /*#63e02d 枠線 */
padding: 0.5em; /* 内側の余白量 */
background-color: snow; /* 背景色 */
width: 24.3em; /* 横幅 */
height: 56px; /* 高さ */
font-size: 1.2em; /* テキスト内の表示文字サイズ */
color: #000000;
line-height: 1.2; /* 行の高さ */
box-sizing: border-box;/* レスポンシブ対応中央 */
