※ ChatGPTを利用し、要約された質問です(原文:セレクトボックス内の文字の文字の大きさを変更したい)
セレクトボックス内の文字の文字の大きさを変更したい
このQ&Aのポイント
セレクトボックス内の文字の文字の大きさを変更する方法について教えてください。
同じ大きさのセレクトボックスでも、文字の大きさが異なる場合があります。
文字を大きくすると、ボックスの横幅も広がる場合があります。
セレクトボックス内の文字の文字の大きさを変更したい
セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセレクトボックス(緑色)は自分のコードのWeb表示画像なのですが、同じく付属画像の下にある、セレクトボックス(青色)は選択するセレクトボックス内の文字が少し大きく表示されています。(他の会社のHP画像です。)ちなみにセレクトボックス自体の大きさはどちらも同じ大きさです。
文字を大きくしたいのですが、どうしたらよいでしょうか?また、文字を大きくすると、勝手にボックス横幅が広がってしまうでしょうか?
以下がコードになります。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"/>
<title>お問い合わせ</title>
<link rel="stylesheet" href="syoki.css">
<style>
/* セレクトボックスの位置 */
.auto-style2 {
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<form>
<h2>支払方法:※</h2>
<div class="auto-style2">
<select name="list" 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>
<p></p>
<p></p>
<p></p>
<span colspan="2"><input type ="submit" name ="submit"value="確認画面へ"></span>
</form>
</body></html>
◎(syoki.css)◎
/* セレクトボックスのスタイル */
#pay {
border: 2px solid #63e02d; /* 枠線 */
padding: 0.5em; /* 内側の余白量 */
background-color: snow; /* 背景色 */
width: 28.8em; /* 横幅 */
height: 56px; /* 高さ */
font-size: 1em; /* テキスト内の表示文字サイズ */
color: #000000;
line-height: 1.2; /* 行の高さ */
お礼
ありがとうございます。解決出来ました。値を変更はして文字が大きくなるのは、知っていたのですが、文字を大きくすると、横幅も何故か、勝手に大きくなってしまったので、少し不安になり質問してみました。よく考えてみると、文字大きくしたら、横幅が大きくなっても、調整すれば良いだけでしたね。何故か思いつきませんでしたが、この回答見て、思い付きました。ありがとうございます。感謝です。