![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
お世話になっております。
環境:
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">選択肢1</option>
<option name="0">長い文字列XXXXXXXXXXXXXXXXXXXXXXX</option>
<option name="0">選択肢3</option>
<option name="0">選択肢4</option>
</select>
</body>
No.1ベストアンサー
- 回答日時:
おっしゃるとおり、SELECTタグのwidthを指定すると、オプションに書かれている文字列が長い場合は、途中で切られてしまいます。
これはプルダウンメニューの仕様で、どうすることも出来ません。
また、オプションタグは改行を受付ませんので、改行して表示することも出来ません。
すべての文字列を出力する方法は、
1.幅の固定をあきらめる(一番長い文字列に幅を合わせる)
2.オプションのフォントサイズを小さくする
が思いつきます。
1は・・・あきらめましょうということです・・・
2は、ちょっと見にくくなるかもしれませんが、オプションのフォントサイズを小さくして、物理的にすべての文字列を固定長の中に収めてしまおうという寸法です。
ただし、あるオプション限定でサイズを指定するということは出来ませんので、SELECTタグに対してフォントサイズの指定をすることになります。
SELECT {
width: 100px;
font-size: 8px;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
このQ&Aを見た人はこんなQ&Aも見ています
-
「環境が人を育てる」って本当?環境によって人格や生き方は本当に変わるのか
環境が人生に与える影響は実際どれほどのものなのか、専門家の田宮由美さんに伺った。
-
<SELECT>タグの折り返し
HTML・CSS
-
オプションメニューの中の文字を折り返したい
ホームページ作成・プログラミング
-
Selectボックスの幅を自動で広げたい
AJAX
-
-
4
[HTML]プルダウンメニューの横幅固定について
HTML・CSS
-
5
HTMLフォームのSELECTの幅を一定にするためには?
HTML・CSS
-
6
SELECTのプルダウンの長さの調整
HTML・CSS
-
7
同じIDで定義した要素の配列を取得したいが
JavaScript
-
8
jQuery セレクトボックスで選択されている値をもう一度選んだ時、イベントを実行させる方法
JavaScript
-
9
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
10
Selectボックスの一覧表示方法
JavaScript
-
11
select insertで複数テーブルから値を取得したい
Oracle
-
12
HTMLからフォルダを開きたい
HTML・CSS
-
13
postgresql についてです
PostgreSQL
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブル内の文字サイズを変更...
-
VBAでListViewのフォントを変更...
-
入力規則のリストの文字の大き...
-
ペイント3Dのテキストサイズ変更
-
プルダウンメニュー内のフォン...
-
”ヒラギノ明朝Pro”をWindowsで...
-
セレクトボックスの幅を指定し...
-
テキストエディタmiの表示文字...
-
エクセルで文字が勝手に大きく...
-
コピーライト記号の表示が小さい
-
<textarea>と<input type="text...
-
ウィキペディア(Wikipedia)っ...
-
5メートル離れた人が読むのに適...
-
フォントをMS P ゴシックにする...
-
テキストエリア内の文字を大き...
-
タイ語と日本語混在のサイトを...
-
EXCELVBAオートシェイプの文字...
-
DreamWeaverの編集時の文字の大...
-
RichTextboxでのフォントの指定...
-
【スタイルシート】 半角と全角...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
-
ペイント3Dのテキストサイズ変更
-
テキストエディタmiの表示文字...
-
alertで表示させる文字サイズは...
-
VBAでListViewのフォントを変更...
-
セレクトボックスの幅を指定し...
-
奇数のフォントサイズ指定について
-
HTMLテキストボックス内の文字...
-
alertで、アイコンの変更、又は...
-
”ヒラギノ明朝Pro”をWindowsで...
-
<table></table>内のFONT指定に...
-
共有メモリについて
-
<pre>タグ内のフォントサイズに...
-
エクセルで文字が勝手に大きく...
-
パスワード欄の"●"文字を小さく...
-
コピーライト記号の表示が小さい
-
アンドロイドスマホでのphp ech...
-
accessのレポートで文字間隔を...
-
英サイト(UTF-8)内での全角文字...
おすすめ情報