セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法

前へ 次へ
このQ&Aのポイント
  • HTMLでセレクトボックス(SELECTタグ)を使用している場合、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。STYLESHEETで幅を指定しても、選択肢の文字列が途中で切り取られるため、使いにくいです。選択肢の文字列を全て表示する方法を知りたいです。
  • セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列を全て表示する方法を教えてください。HTMLで使用しているセレクトボックス(SELECTタグ)では、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。幅を指定しても、選択肢の文字列が途中で切り取られてしまい、使いづらいです。
  • Windows2000とIE6.0の環境で、HTMLのセレクトボックス(SELECTタグ)を使用しています。選択肢(OPTIONタグ)の文字列が長い場合、セレクトボックスの幅も長くなります。STYLESHEETで幅を指定しても、選択肢の文字列が途中で切り取られてしまい、利用できません。セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法を教えてください。
回答を見る
  • ベストアンサー

セレクトボックスの幅を指定した状態で、選択肢の文字列を全て表示する方法

お世話になっております。 環境： Windows2000 IE6.0 HTMLでセレクトボックス(SELECTタグ)を使用しているのですが、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。 STYLESHEETでWIDTHを指定してみたのですが、選択肢の文字列が途中で切り取られてしまい、使えません。 セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法があれば教えて下さい。 ■ソース■ <html> <head> <STYLE TYPE="text/css"> <!-- SELECT { width: 100px; } --> </STYLE> <title>サンプル</title> </head> <body> <select name="" selected> <option name="0">選択肢１</option> <option name="0">長い文字列XXXXXXXXXXXXXXXXXXXXXXX</option> <option name="0">選択肢３</option> <option name="0">選択肢４</option> </select> </body>

  • HTML
  • 回答数1
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • EUR
  • ベストアンサー率61% (29/47)
回答No.1

おっしゃるとおり、SELECTタグのwidthを指定すると、オプションに書かれている文字列が長い場合は、途中で切られてしまいます。 これはプルダウンメニューの仕様で、どうすることも出来ません。 また、オプションタグは改行を受付ませんので、改行して表示することも出来ません。 すべての文字列を出力する方法は、 １．幅の固定をあきらめる（一番長い文字列に幅を合わせる） ２．オプションのフォントサイズを小さくする が思いつきます。 １は・・・あきらめましょうということです・・・ ２は、ちょっと見にくくなるかもしれませんが、オプションのフォントサイズを小さくして、物理的にすべての文字列を固定長の中に収めてしまおうという寸法です。 ただし、あるオプション限定でサイズを指定するということは出来ませんので、SELECTタグに対してフォントサイズの指定をすることになります。 SELECT { width: 100px; font-size: 8px; }

akahuku7
質問者

お礼

やっぱり無理なんですか～。 今回は諦めます^^; ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSでボックス幅を文字列に合わせたい

    ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。 テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

    • ベストアンサー
    • HTML
  • セレクトボックス内の文字の文字の大きさを変更したい

    セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセレクトボックス（緑色）は自分のコードの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
  • セレクトボックス幅を小さく、選択肢の文字は全て表示

    セレクトボックスの幅を小さめに指定し、選択肢の文字列は全て表示できる方法を探しています。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_forminputcustomize/dropdownchecklist.inc&ttl=%90%DD%92u%83T%83%93%83v%83%8B 上記サイトの「長いテキスト、短いコントロール」のプルダウンのようにする方法が分かりましたら、ご教示よろしくお願いします。

  • Smartyで、セレクトボックスが選択された時に

    いつもお世話になっています。 Smartyに関して質問します。 以下のようなtemplateがあった場合に、 <html> <head><title></title> </head> <body> <selection name="hobby"> <option name="hobby[]" value="0" >スポーツ</option> <option name="hobby[]" value="1">卓球</option> </selection> <div id ="hobby_details">ここに、選択された値により表示する内容を変える </div> </body> </html> セレクトが選択されたら、それをキーにdbに接続して値をとってき、 再度<div></div>内部に値を表示することはできないのでしょうか？ その場合として、pluginクラスを作って表示することはできないのでしょうか？ したいのが、セレクトボックスが選択されたときに、<div></div>内に値を表示したいのです。 宜しくお願いします。

    • ベストアンサー
    • PHP
  • セレクトボックスを動的に選択された状態で表示

    画面から取得した値を元にセレクトボックスが選択された状態で画面に表示させる方法を教えて下さい。 JavaScript //前の画面から値を取得 //取得した値は問題無し if(kbumon=="10"){ var bumon = "部署1"; }else if(kbumon=="20"){ var bumon = "部署2"; }else{ var bumon = ""; } var data = { bumon : bumon, } html <span style=" color:black;"><b>部署：</b></span> <select name="bumon" class="select"> <option></option> <option>部署1</option> <option>部署2</option> </select>

  • 【IE6】テーブルにcolspanが入ると幅指定がずれる？

    閲覧いただきありがとうございます。 <Html>にて、<table>を入れているのですが <colspan>すると幅指定がずれてしまいます。 タグ記述のミスなのか、仕様なのかはっきりと分からない為 質問させていただきます。 下記のようなテーブルを作っています。 【テーブル】 テーブル幅 500px 2行 5列：（各列100pxの5等分） 【列内容】 1行目 ├5列全て colspan 2行目 ├1列目：100px ├2-3列目：100+100＝200px (colspan=2) ├4-5列目：100+100＝200px (colspan=2) ここで、2-3列目に幅200pxに指定した <select>タグを入れると、意図しない幅になってしまいます。 意図している動きは 2-3列目の幅ぴったりに<select>が入ってほしいのですが 4-5列目の4列部分がえぐれてしまい、4-5列目が200pxではなく 100pxぐらいの描画になってしまいます。 そして<select>タグは2-3列目にぴったりと入らず、 後ろに100pxの空きがでてしまいます。 http://kikky.net/pc/css_bug020.html このサイトではIE6ではcolspanがあると幅指定がずれると なっていますが、同一の現象なのでしょうか？ 示唆いただければ幸いです。 宜しくお願いします。 --------------記述html--------------- <html> <head> <title> ColSpanテスト </title> </head> <body> <table width="500" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" style="border-collapse: collapse;" > <colgroup> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> </colgroup> <!-- １行目 --> <tr> <td colspan="5"> span5 </td> </tr> <!-- ２行目 --> <tr> <!-- １列目 --> <td> </td> <!-- ２-３列目 --> <td nowrap colspan="2" > <select style="width:200px;" size="1" name="sl" id="sl"> <option value="99999">２列にしたい</option> </select> </td> <!-- ４-５列目 --> <td colspan="2" > 200pxなのに・・・ </td> </tr> </table> </body> </html>

  • セレクトボックスの「選択してください」選択しても、未選択として扱いたい

    メールフォームを作成しています。 CGIのメールプログラムを使って、セレクトボックス「A」を必須入力項目としたのですが、一番上のものが「選択されている」とみなされてしまい、改めて選択しなくても、メールが送信できてしまいます。 <select name="A"> <option value="選択してください"> 選択してください</option> <option valui="1">1</option> <option valui="2">2</option> <option valui="3">3</option> <option valui="4">4</option> </select> どうしたらいいでしょうか。 助けて下さる方、お待ちしております。

    • ベストアンサー
    • HTML
  • セレクトボックスの選択項目を変える

    セレクトボックスの選択項目を変えるには どうすればいいですか？ <FORM action=./ method=post> <SELECT name=server> <OPTION value=2 selected>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> </SELECT> </FORM> こういうフォーム（FORMやOPTIONにnameがない）で [4]を選択したいです このフォームを書き換えないで(スクリプトでの書き換えなら○) どうにか変えることはできないでしょうか？ IEのみの対応でいいので、お願いします

  • 2つのセレクトボックスで選択した組み合わせの結果

    社内で個人的に使うためのツールを Google Sites で作成中なのですが、 できれば、セレクトボックスの組み合わせの結果はテキストではなく、 条件に一致した結果でのフローをまとめた画像やGoogleスライドを指定して、 各条件ごとに振り分けて表示させたいと考えています。 ネットで色々と検索しながら試行錯誤した結果、 <textarea> に画像やスライドを反映するのは不可と判断しておりますが、 なにか別の要素を指定することで可能な場合や、 その他に可能な方法があればご教示いただけますと幸いです！ コードは下記です。 </head> <!-- javascriptファイル --> <script type="text/javascript"> function check(f){ var arr={ "A":{"aaa":"Aとaaaを選択しました","bbb":"Aとbbbを選択しました"} ,"B":{"aaa":"Bとaaaを選択しました","bbb":"Bとbbbを選択しました"} }; var select1=f.elements["select1"].value; var select2=f.elements["select2"].value; f.elements["C"].value=(arr[select1] && arr[select1][select2])?arr[select1][select2]:""; } </script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <body> <p class="title">該当する組み合わせを選択してください。</p> <form> <div class="cp_ipselect cp_sl01"> <select name="select1" onchange="check(this.form);"> <option value="">------ 選択肢①を選択してください ------</option> <option value="A">A</option> <option value="B">B</option> </select> </div> <div class="cp_ipselect2 cp_sl02"> <select name="select2" onchange="check(this.form);"> <option value="">------ 選択肢②を選択してください ------</option> <option value="aaa">aaa</option> <option value="bbb">bbb</option> </select> </div> <p class="title2">選択肢①と②の組み合わせの結果</p> <!-- 下の textarea 箇所に各組み合わせごとにテキストではなく、画像やスライドを表示したいです --> <textarea name="C"></textarea> </form> </div> </body> </html>

  • iPhoneでセレクトボックスが選択できない

    スマートフォンにも表示対応している、フォームを作成しています。 セレクトボックスがあり、希望の値を選択するような項目があります。 <select name="sentaku"> <option value="A" selected>A</option> <option value="B">B</option> </select> ブラウザでも（ＩＥ9、crome）、iPhone5でも表示はされますが、 iPhone5で表示した場合、選択項目はグリグリって項目を選べる感じにはなるのですが、 項目をタップしても、決定されず、右上の完了を押さないと選択が決定されません。 ネットで検索し、メタタグ"viewport"をwidth=device-widthにしたり、width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no で試していますが、選択項目に関しては、項目名タップで決定できない状態です。 ページのURLを記載できないので、上記イメージだけで申し訳ありませんが、どなたかお解りになる方、宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する