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

解決済

質問者：akahuku7
質問日時：2005/07/13 09:44
回答数：1件

お世話になっております。

環境：
Windows2000
IE6.0

HTMLでセレクトボックス(SELECTタグ)を使用しているのですが、選択肢(OPTIONタグ)の文字列が長いと、セレクトボックスの幅も長くなってしまいます。

STYLESHEETでWIDTHを指定してみたのですが、選択肢の文字列が途中で切り取られてしまい、使えません。

セレクトボックスの幅を指定し、プルダウンで表示される選択肢の文字列は全て表示されるような方法があれば教えて下さい。

■ソース■
<html>
<head>
<STYLE TYPE="text/css">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： EUR
回答日時：2005/07/13 10:13

おっしゃるとおり、SELECTタグのwidthを指定すると、オプションに書かれている文字列が長い場合は、途中で切られてしまいます。

これはプルダウンメニューの仕様で、どうすることも出来ません。
また、オプションタグは改行を受付ませんので、改行して表示することも出来ません。

すべての文字列を出力する方法は、
１．幅の固定をあきらめる（一番長い文字列に幅を合わせる）
２．オプションのフォントサイズを小さくする
が思いつきます。

１は・・・あきらめましょうということです・・・
２は、ちょっと見にくくなるかもしれませんが、オプションのフォントサイズを小さくして、物理的にすべての文字列を固定長の中に収めてしまおうという寸法です。
ただし、あるオプション限定でサイズを指定するということは出来ませんので、SELECTタグに対してフォントサイズの指定をすることになります。
SELECT {
width: 100px;
font-size: 8px;
}