セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセレクトボックス（緑色）は自分のコードのWeb表示画像なのですが、同じく付属画像の下にある、セレクトボックス（青色）は選択するセレクトボックス内の文字が少し大きく表示されています。（他の会社のHP画像です。）ちなみにセレクトボックス自体の大きさはどちらも同じ大きさです。文字を大きくしたいのですが、どうしたらよいでしょうか？また、文字を大きくすると、勝手にボックス横幅が広がってしまうでしょうか？以下がコードになります。お問い合わせ /* セレクトボックスの位置 */ .auto-style2 { margin: auto; text-align: center; } 支払方法：※ >クレジットカード >銀行振込 ◎（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; /* 行の高さ */

セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセ

解決済

質問者：pjdmgam
質問日時：2021/04/19 11:16
回答数：1件

セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセレクトボックス（緑色）は自分のコードの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; /* 行の高さ */

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2021/04/19 13:09

こんにちは

ご提示のソースにわざわざコメントまでつけてあるのに？？

＞文字を大きくしたいのですが、どうしたらよいでしょうか？
ご自分でCSSで指定しているのですから、文字サイズ（＝font-size）の大きさを変えればよいだけです。

＞また、文字を大きくすると、勝手にボックス横幅が広がってしまうでしょうか？
ボックスサイズを、文字サイズに依存する指定（emなど）をしていれば、それに連動して変わることになります。
絶対的なサイズ指定（pxなど)であれば、文字サイズに依存しません。

※ CSSの基本を学ばれた方が良のいかもしれません。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。解決出来ました。値を変更はして文字が大きくなるのは、知っていたのですが、文字を大きくすると、横幅も何故か、勝手に大きくなってしまったので、少し不安になり質問してみました。よく考えてみると、文字大きくしたら、横幅が大きくなっても、調整すれば良いだけでしたね。何故か思いつきませんでしたが、この回答見て、思い付きました。ありがとうございます。感謝です。

通報する

お礼日時：2021/04/19 13:19

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！