- 締切済み
セレクトボックス内のフォント位置
はじめまして。 検索窓のフォームデザインで テキストフォールド、セレクトボックス、ボタン と横並びにしており、各ボックスの高さを デフォルトより少し大きくしようと思い、テキストフィールドの 文字を中央にするにはpaddingで調節できたんですが セレクトボックスの文字がIE8だと下揃えに firefoxだと上揃いになり、中央に揃えたいんですが 方法がわかりません。 文字を中央にしたいのはよくある最初の <option value="-" selected>選択して下さい</option> の箇所だけです。 セレクトボックスのフォントサイズを大きくしてごまかす事も可能ですがテキストフィールドの文字も大きくしないとバランスがおかしくなってしまいます。 ご存知の方がいましたらよろしくお願いします。
- kantona
- お礼率12% (14/110)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
paddingでなく、line-heighｔでは、ダメだったですか？ line-height=xxem; height=xxem; xxは同値で、1.2とか1.5とか2.0とかの値 では？
関連するQ&A
- ２つのセレクトボックスで選ばれた結果をショッピングカートに渡したい
同一ページ内に次の様な２つのセレクトボックスが有ります。 それぞれ選択された内容を足してショッピングカートに送りたいのですがどうしたら良いのでしょうか？ セレクトボックス１ <option value="aaa">aaa</option> <option value="bbb">bbb</option> <option value="ccc" selected="selected">ccc</option> セレクトボックス２ <option value="100">100</option> <option value="200">200</option> <option value="300" selected="selected">300</option> ●セレクトボックス１→aaaを選択 セレクトボックス２→100を選択 ショッピングカートには「aaa100」で渡す ●セレクトボックス１→cccを選択 セレクトボックス２→200を選択 ショッピングカートには「ccc200」で渡す 全くの初心者ですがよろしくお願いします。
- 締切済み
- JavaScript
- セレクトボックスとテキストボックスの連動について
セレクトボックスで質問事項を選ぶと、テキストボックスの中に選択した名称が表示される。ということをやりたく下記の様に設定しました。 <script> function hoge(obj){ var f=obj.form; var v=obj.options[obj.selectedIndex].value; var c=f.elements["comment"]; c.value+=v; obj.selectedIndex=0; } </script> <select name="質問事項1" onchange="hoge(this)"> <option value="selected">質問事項を選んでください</option> <option value=“質問1">質問1</option> <option value="質問2">質問2</option> <option value="質問3">質問3</option> </select> <textarea name="comment"></textarea> 現在発生している問題が1点あります。 セレクトボックスで質問を2回選ぶと、選んだ2つの結果がテキストボックス内に連続して表示されます。 例： 1回目 セレクトボックス内 「質問1」を選択 ↓ テキストボックス内 「質問1」が表示 2回目 セレクトボックス内 「質問2」を選択 ↓ テキストボックス内 「質問1質問2」と表示 2回目以降選んだ場合に前回の処理をクリアにして、1つのみ表示させたいと思うのですがどうやればいいのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトボックス内の文字の文字の大きさを変更したい
セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセレクトボックス（緑色）は自分のコードの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; /* 行の高さ */
- ベストアンサー
- CSS
- javascriptでセレクトボックスを動的に
javascriptでセレクトボックスの"selected"を動的に変更する方法を教えてください＞＜ 下記のselectedを"１０"から"５０"に変更したいのですが、 某ASPサービスの環境下での作業のため制約があり直接変更できません。 <body onload="event"> <select name="select"> <option value="10" selected="selected">10件</option> <option value="30">30件</option> <option value="50">50件</option> </select> そこで、JavaScriptで何とかしようと思うのですが、 <select>～ </select>の間（selectタグ含む）は、ASPサービスの制約でIDやclassを入れることもできず、 変更できるのは、body開始タグ部分、headerタグ内、body内（一部）です。 ページを読み込んだ際に、「５０件を選択」、「１０件からselected外す」状態にしたいです。 いろいろサイトを見てなんとなくできそうな気はするのですが、 スキル的に初心者レベルのため、わかりませんでした。 何卒よろしくお願いします！
- ベストアンサー
- JavaScript
- セレクトボックスのselected属性の値について
プログラミング初心者です。 セレクトボックスのselected属性で、<option selected>か、<option selected="selected">で選択済みになりますが、<option selected="???">の???に入る値は「selected」しかないのでしょうか？ 例えば、<option selected="false">みたいな感じで、selected属性を書いておいて選択済みにしないということはできないでしょうか。 回答よろしくお願いします。
- ベストアンサー
- HTML
- セレクトボックスの内容を中央寄せ
IE系ブラウザで表示する場合ですが、 セレクトボックスの内容を中央寄せしたいのですが、どうしたらよいでしょうか。 直接HTMLに書くよりも、スタイルシートでの指定にしたいと思っています。 それができなければ、HTMLに書いてもよいです。 よろしくおねがいします。 select.html --------------------------------------------------- <select name="selectmenu" class="selectbox"> <option value="param1">ここの文字を中央寄せ</option> <option value="param2">ここの文字が中央寄せ</option> <option value="param3">ここの文字が中央寄せ</option> <option value="param4">ここの文字が中央寄せ</option> </select> ---------------------------------------------------- style.css ---------------------------------------------------- .selectbox{ ここで中央寄せを指定 } ----------------------------------------------------
- 締切済み
- HTML
- SELECT要素の垂直位置
SELECTをheight指定で高さを広げています。 <select style='height:30px;'> <option value='1'>要素1</option> <option value='2'>要素2</option> <option value='3'>要素3</option> <option value='4'>要素4</option> </select> IE8だと要素文字列がプルダウン表示枠の下に寄ってしまいます。 FireFoxやIE9以上だと垂直方向の中央に寄ります。 できれば、これをIE8でも垂直方向の中央に寄せたいのですが、 方法がわかりません。宜しくお願いします。 IE8だと ┌───────────── │ │ ▼ │要素1 └───────────── ↓ IE8でもこうしたい FireFoxやIE9以上だと ┌───────────── │ │要素1 ▼ │ └─────────────
- ベストアンサー
- CSS
- 決済フォームのセレクトボックスの矢印
決済フォームのセレクトボックスの矢印を（付属画像のように三角の大きい目立つデザインにしたいです。 付属画像の緑色のフォームは自分のコードの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; }
- ベストアンサー
- CSS
- ワード テキストボックス内の文字の位置
ワードで、横書きのテキストボックスの中の文字を 左右の真ん中にする方法は、 『段落』の『インデントと行間隔』の『配置』で『中央揃え』にしたり タスクバーにある『中央揃え』で簡単にできるのですが、 上下の真ん中にする方法がわかりません。 どうしたらいいのでしょうか？
- ベストアンサー
- オフィス系ソフト
- テキストボックスとセレクトボックスの選択肢の連携
この度はお世話になります。 １個のテキストボックスに入力された文字列により、その後の１個の セレクトメニューの選択肢を変更することってできるのでしょうか？ 具体的には以下のような動作です。 ・デフォルトではテキストボックスに文字列が入力された場合は、 その後のセレクトボックスには「トマト、きゅうり、ほうれんそう」 の選択肢が入る。 ・テキストボックスに「あいうえお」と入力された時のみ、その後の セレクトボックスが「りんご、みかん、ぶどう」の選択肢に変わる。 ・テキストボックスに「かきくけこ」と入力された時のみ、その後の セレクトボックスに「あじ、さば、かつお」の選択肢に変わる。 こんな感じですが、よろしくお願い致します。 当方、只今javascriptを勉強しており、条件式に苦戦しております。 サンプルプログラムを見せていただけるとありがたく思います。
- ベストアンサー
- JavaScript
