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

  • ガイド ( How to )
  • ありがとう数:0

はじめに

Photo by 読書マン
環境: Windows2000 IE6.0 HTMLでセレクトボックス(SELECTタグ)を使用していて、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまうあなたへ。

STEP1STYLESHEETでWIDTH

を指定しても、選択肢の文字列が途中で切り取られてしまい、使えませんよね。 セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法はないのでしょうか。






サンプル


選択肢1
長い文字列XXXXXXXXXXXXXXXXXXXXXXX
選択肢3
選択肢4

STEP2SELECTタグのwidthを指定

すると、オプションに書かれている文字列が長い場合は、途中で切られてしまいます。 これはプルダウンメニューの仕様で、どうすることも出来ません。

STEP3また、オプションタグ

は改行を受付ませんので、改行して表示することも出来ません。 すべての文字列を出力する方法は、
1.幅の固定をあきらめる(一番長い文字列に幅を合わせる)
2.オプションのフォントサイズを小さくする が思いつきます。
1は・・・あきらめましょうということです・・・
2は、ちょっと見にくくなるかもしれませんが、オプションのフォントサイズを小さくして、物理的にすべての文字列を固定長の中に収めてしまおうという寸法です。

このユーザなら私の疑問や悩みを解決してくれそうと思ったら、
質問への回答をリクエストすることができます。

関連するタグ

必要なもの

ただし、あるオプション限定でサイズを指定するということは出来ませんので、SELECTタグに対してフォントサイズの指定をすることになります。 SELECT { width: 100px; font-size: 8px; }

特集


感謝でトクする時代へ!感謝経済に参加しよう!

ピックアップ

ページ先頭へ