おしえて

[HTML]プルダウンメニューの横幅固定について

解決済

質問者：Dr.SE
質問日時：2020/01/23 10:42
回答数：2件

HTMLで、プルダウンメニューの横幅が広がらないように固定したいです。

OPTIONタグに１つでも長い文字列が入っていると、
最大文字数に合わせてプルダウンメニューが広がってしまいます。

SELECTやOPTIONに「width: XXpx;」とサイズ指定すると、
プルダウン項目の横幅は固定できても
プルダウンをクリックした際に出てくるプルダウンメニューの横幅は伸びたままでした。

JQueryのプラグイン等に頼らず、
通常のCSSやJSで対処したいのですが可能でしょうか？

通報する

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

質問の本文を隠す

回答 (2件)

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

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2020/01/23 16:05

こんにちは

ブラウザのselect要素をコントロールしようとする限りでは、ご質問のような仕様のようです。
ですので、どうしてもご質問内容を実現したいのであれば、自前で（selectと同じ機能のものを）作成することになります。

No1様の回答（通常はメニューやナビゲーションに利用されている方法ですが）を応用しても良いですし、プラグインで実現している例を応用しても良いでしょう。
＞JQueryのプラグイン等に頼らず、～～
とのことですので、自前のCSSとjavascriptになるのかも知れませんが、jQueryを使用しなくても（jQueryそのものがjavascriptですから）素のjavascriptだけで同様のことが実現できます。

- 0
- 件

通報する

この回答へのお礼

fujillin様

ご回答ありがとうございます。

やはりSELECTとOPTIONのタグのままでは実現できないんですね...。
自前で作るのもちょっと難易度高そうですし。
スタイルをちょっと修正する程度で調整できれば...と思ったのですが残念です。

承知いたしました。
時間的な関係もあるので、どのように対応するか検討してみます。

ありがとうございました。

通報する

お礼日時：2020/01/23 16:31

No.1

回答者： gura_
回答日時：2020/01/23 12:19

Dr.SEさん

>･･･横幅が広がらないように固定したい･･･････････

はい。可能です。
ご参考に↓

http://js.crap.jp/book/chapter2/drop-down-3menu. …

- 0
- 件

通報する

この回答へのお礼

gura_様

ご回答ありがとうございます。

＞はい。可能です。

できるんですね！
もうすっかりあきらめかけてました。

参考サイトを拝見したのですが、
どの辺が幅固定に効いているのかがいまいちわからず...。
知識不足で申し訳ありません。。。

下記のような簡単な選択ボックスについて、
長い文字列の場合は全部見せれなくていいのでプルダウンメニューの幅を固定したいのですが
可能でしょうか？
※既存システムで特定項目のプルダウンのみに対応したいため、
　あまり思い切った修正ができません。。。　

<html>
<head>
<STYLE TYPE="text/css">

</STYLE>
<title>プルダウンサンプル</title>
</head>
<body>
<select name="" selected>
<option name="0">プルダウンメニュー１</option>
<option name="0">プルダウンメニュー２</option>
<option name="0">長い文字列〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</option>
<option name="0">プルダウンメニュー４</option>
</select>
</body>