更新日: 2011-08-15 16:10:17

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

著者: 読書マン

編集者: OKWAVE Guideスタッフ

閲覧数: 600

Okgn btn gudie info favorite

0

はじめに

Photo by 読書マン

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

STEP1 STYLESHEETでWIDTH

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




<!-- SELECT { width: 100px; } -->

サンプル


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

STEP2 SELECTタグのwidthを指定

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

STEP3 また、オプションタグ

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

【PR】


このガイドは役に立ちましたか?ガイドの著者にお礼を伝えよう!

Okgn btn gudie info thunks b

45

当ガイドは作成日時点での情報です。ガイド内容の実施はご自身の責任の元、ご利用いただきますようお願いいたします。

このガイドを通報する

著者名:
読書マン

読書マンです。

マンといいながら、実は主婦してます。

夫には内緒です。

必要なもの

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