プロが教えるわが家の防犯対策術！

HTMLフォームのSELECTの幅を一定にするためには？

解決済

  • 質問者：b_hunter
  • 質問日時：
  • 回答数：1件

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか？

CSS等で設定できるとありがたいのですが、やり方がわかりません。

通報する

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

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「CSS 設定」に関するQ&A： ブックマークにCSS設定が効いてしまう

A 回答 (1件)

No.1ベストアンサー

  • 回答者： xs200
  • 回答日時：

<select style="width: 200px">

    • good
    • 30
    • 件
通報する
この回答へのお礼

ありがとうございました。
調べればすぐに判る質問をしてしまい、すみません。

通報する
お礼日時：2009/07/05 12:38

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qタグでの selected 状態にするには・・・。

実は簡単なのかもしれないですが・・・。
変なとこで躓いています。

<SELECT>タグで１５個の<OPTION>が入っているとします。
１２番目の<OPTION>のやつをＨＴＭＬでいうところのselected状態にするにはどうしてやればいいですか？

宜しくお願いいたします。

Aベストアンサー

JavaScriptからselect要素の中の特定のoptionを選択状態にしたい場合は、

document.form名.select名.options[番号].selected= true;

でいけると思います。
ご質問のケースでは、12番目の要素を選択させると言うことですので、option要素の12番目を指定する意味で

document.form名.select名.options[11].selected= true;

とすれば良いと思います。 JavaScriptでも自動的に取得される要素の配列の連番は0から始まるので、12番目の要素を持つ配列の番号は11になることに気をつければ、問題ないでしょう。

参考になれば…

他の回答も見る

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか？
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、３つ以上なら
別途function化したほうが、可読性が高くなると
思います。

他の回答も見る

Qプルダウンメニュー表示時の高さの指定方法

ブラウザ上でプルダウンメニューを表示させる際に、表示される高さ（タテ幅）の指定をするにはどうすればよいか、ご存知の方は教えていただけないでしょうか？

ちなみに、プルダウンメニューの横幅は、<select>タグ内に、「style="width:（幅を指定）;"」を記述することで固定幅の設定が可能でしたが・・・

なお、プルダウンメニューは初期表示として、１件のみ表示させるものとします（すなわち、<select>タグ内の「size="1"」の指定は変えないこととする）。

というのも、プルダウンに表示させる項目（条件によって可変）の件数が多い場合に、プルダウンメニュー内でスクロールさせるのをできるだけ避けたいためです。
よって、方法としては、
１．プルダウン表示させる際の高さ（タテ幅）を固定で指定する
２．可能であれば、登録されている全項目の表示をさせる
以上２つの方法を考えています。

なにかよい方法があれば、ぜひ教えてください。

Aベストアンサー

ご存知のように<select>タグの属性で縦幅を設定することはできませんね。

http://tohoho.wakusei.ne.jp/html/select.htm

スタイルでも設定はできないようですね。

異なるＯＳで同じブラウザで同じページの<select>タグ内を
表示しても縦幅が異なりますので
ＯＳに依存されてしまうのでしょうか？
また、画面の解像度によるかもしれません。

他の回答も見る

QSelectボックスの幅を自動で広げたい

Selectボックスの幅を自動で広げたい

Jqueryを使って、DBから取得した値を下記のようにSelectボックスに入れています。

$('select#name).prepend('<option value="' + val[1] + '">' + val[2] + '</option>');


HTMLの方は下記のように設定してあり、

<select id="name">　</select>

値もきちんと挿入されます。

ただ、値が入ったあとのSelectボックスの幅が狭くて、選択した後に全部表示されていない状態です。

これを入れた値の文字数に応じて、またはこのSelectボックスが複数あるのですが、最大文字数に合わせた幅に自動で設定するのにはどうやってやればいいのでしょうか。

下記のように試してみたのですが、うまくいきませんでした。

<select id="name" style="width:auto;"></select>

<select id="name" style="width:100%;"></select>


どなたかおわかりの方いらっしゃいましたら教えてください、

よろしくお願い致します。

Selectボックスの幅を自動で広げたい

Jqueryを使って、DBから取得した値を下記のようにSelectボックスに入れています。

$('select#name).prepend('<option value="' + val[1] + '">' + val[2] + '</option>');


HTMLの方は下記のように設定してあり、

<select id="name">　</select>

値もきちんと挿入されます。

ただ、値が入ったあとのSelectボックスの幅が狭くて、選択した後に全部表示されていない状態です。

これを入れた値の文字数に応じて、またはこのSelectボックスが複数あるのですが、最大文字数...続きを読む

Aベストアンサー

再現できないんですよねえ。
val[1]とval[2]に任意の長さの文字列をセットして
$('select#name).prepend('<option value="' + val[1] + '">' + val[2] + '</option>');
してもちゃんと、最大の幅に自動拡張されます。

もしかして、
<select id="name">　</select>
が同じidで複数あるのですか？
あるいは、<select>の親とか、CSS定義とかで、widthを
指定しているところがあるのでしょうか

他の回答も見る

QSELECTのプルダウンの長さの調整

困っております。。ご存じの方ぜひ教えて頂けたらと思います。


HTMLのSELECTタグでプルダウンを作成しています。
OPTIONで指定しているリストは１００件ほどあります。
この状態で▼を押してリストを表示すると、
縦が長すぎで、画面の外に飛び出る場合があります。
こうなると、スクロールバーもつまむことができないので
目的のものが選択できないことがあります。
プルダウンの表示長さを調節することはできませんでしょうか？

なお、SELECT以外の代替え案は勝手ながらご遠慮願います。
よろしくお願いしますm(_ _)m

Aベストアンサー

> 縦が長すぎで、画面の外に飛び出る場合があります。

・・・ブラウザのバグと思います。
参考に、OSと、ブラウザの種類とバージョンを教えて戴けないでしょうか。
（Safari3.0にはブックマークが画面外に表示されて選択できなくなるバグがありましたが)

ネットブックのような画面が小さなパソコンでは、
都道府県（47項目）を表示するだけで画面サイズを超えますので、
そういうブラウザでは閲覧できなくなってしまいますね。
（IE7ではセレクトフィールドのプルダウンメニューにスクロールバーが表示されました)

> プルダウンの表示長さを調節することはできませんでしょうか？
残念ながらそういう方法はありません。

ブラウザベンダーに連絡して、バグを修正してもらうのを待つか、
代替案として<select size="">を指定したり、
<optgroup>で入れ子にしていくとか、
JavaScriptのフローティングウインドウ（ポップアップウインドウ）で擬似的にプルダウンメニューをつけるくらいしかないと思います。


横幅については

<option value="1" label="ほげ">あいうえおあいうえお・・・</option>

という、短く表示する方法もありますが、ブラウザが対応していない可能性の方が高いです。
（この例では「ほげ」が表示される・・・はず）

> 縦が長すぎで、画面の外に飛び出る場合があります。

・・・ブラウザのバグと思います。
参考に、OSと、ブラウザの種類とバージョンを教えて戴けないでしょうか。
（Safari3.0にはブックマークが画面外に表示されて選択できなくなるバグがありましたが)

ネットブックのような画面が小さなパソコンでは、
都道府県（47項目）を表示するだけで画面サイズを超えますので、
そういうブラウザでは閲覧できなくなってしまいますね。
（IE7ではセレクトフィールドのプルダウンメニューにスクロールバーが表示...続きを読む

他の回答も見る

Q

教えていただけますか？
<input type="text" readonly/>を表示したときに表示される枠を
消すことができますか？
何故？と聞かれたら困りますが。。。
よろしくお願いします。

Aベストアンサー

inputにstyle=border:none;を付けると枠線消えましたよ
（Firefox、IE7では確認出来ました）

他の回答も見る

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか？
<TD>タグや<TR>タグのところでいじくるのですか？

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
＃2の方法ですね。

テーブルごとやセル（<TD>）ごとにサイズを変更するには
スタイルシート（CSS）を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル（<TD>）ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

＃1の方法だとページ内の全てのセル（<TD>）に設定することになります。

スタイルシート（CSS）はこれら以外にも
いろいろな設定方法があります。

他の回答も見る

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか？
↓下記のようなイメージにしたいです。

--------------------
--------------------
　　　　□　□　□　　←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="＜＜ 戻る ＜＜" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value="＞＞ 進 む＞＞" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか？
↓下記のようなイメージにしたいです。

--------------------
--------------------
　　　　□　□　□　　←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="＜＜ 戻る ＜＜" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="＜＜ 戻る ＜＜" />
<input type="submit" value="選択リセット" />
<input type="submit" value="＞＞ 進 む＞＞" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報