セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセレクトボックス(緑色)は自分のコードの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; /* 行の高さ */
No.1ベストアンサー
- 回答日時:
こんにちは
ご提示のソースにわざわざコメントまでつけてあるのに??
>文字を大きくしたいのですが、どうしたらよいでしょうか?
ご自分でCSSで指定しているのですから、文字サイズ(=font-size)の大きさを変えればよいだけです。
>また、文字を大きくすると、勝手にボックス横幅が広がってしまうでしょうか?
ボックスサイズを、文字サイズに依存する指定(emなど)をしていれば、それに連動して変わることになります。
絶対的なサイズ指定(pxなど)であれば、文字サイズに依存しません。
※ CSSの基本を学ばれた方が良のいかもしれません。
ありがとうございます。解決出来ました。値を変更はして文字が大きくなるのは、知っていたのですが、文字を大きくすると、横幅も何故か、勝手に大きくなってしまったので、少し不安になり質問してみました。よく考えてみると、文字大きくしたら、横幅が大きくなっても、調整すれば良いだけでしたね。何故か思いつきませんでしたが、この回答見て、思い付きました。ありがとうございます。感謝です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンク文字
-
アコーディオンメニューが思う...
-
全角半角含めて等幅で表示したい
-
fontサイズ指定の ”-(マイナ...
-
文字の位置、上下のマージンが...
-
セレクトボックス内の文字の文...
-
<pre>のフォントサイズを指定す...
-
html,cssでスマホとパソコンで...
-
Format 関数 表示書式指定文字...
-
テキストボックス途中で切れて...
-
<input type="file"> の幅
-
Excel VBA メール作成について ...
-
CSSでfont-weightを指定しても...
-
テキストファイルの行を指定し...
-
特定の文字のみcssを適用するに...
-
background-color: #ddd;の意味...
-
CSSを一部無効にしたい
-
ホームページビルダー作成HPがi...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
WEBサイトの作成で、imgタグに...
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
全角半角含めて等幅で表示したい
-
ホームページビルダー作成HPがi...
-
テキストファイルの行を指定し...
-
background-color: #ddd;の意味...
-
リンク文字
-
Format 関数 表示書式指定文字...
-
fontサイズ指定の ”-(マイナ...
-
HTMLで特定の文字だけ色を変え...
-
CSSを一部無効にしたい
-
指定の文字だけ色を変える
-
上付き文字と下付き文字を同時...
-
Excel VBA メール作成について ...
-
遊明朝のプロポーショナルフォ...
-
テキストエリア内の文字の装飾
-
jquery.validationEngine.jsカ...
-
テキストボックス途中で切れて...
おすすめ情報