人に聞けない痔の悩み、これでスッキリ >>

SELECTをheight指定で高さを広げています。

<select style='height:30px;'>
<option value='1'>要素1</option>
<option value='2'>要素2</option>
<option value='3'>要素3</option>
<option value='4'>要素4</option>
</select>

IE8だと要素文字列がプルダウン表示枠の下に寄ってしまいます。
FireFoxやIE9以上だと垂直方向の中央に寄ります。

できれば、これをIE8でも垂直方向の中央に寄せたいのですが、
方法がわかりません。宜しくお願いします。

IE8だと
┌─────────────
│                   
│                   ▼
│要素1               
└─────────────

↓ IE8でもこうしたい

FireFoxやIE9以上だと
┌─────────────
│                   
│要素1               ▼
│                   
└─────────────

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

A 回答 (2件)

 formのユーザーインターフェースに関わる物は基本的にスタイルシートで変更はできません。

出来たとしても弄るべきではありません。
 サイトごとに、ユーザーインターフェースが異なると困るからです。

 ただ、標準モードだと下記の通り・・
p.form{line-height:60px;}
p.form select,p.form select option{display:block;height:60px;}


<form action="./">
 <p>本文項記事</p>
 <p class="form">
  <select name="test">
   <option value='1'>要素1</option>
   <option value='2'>要素2</option>
   <option value='3'>要素3</option>
   <option value='4'>要素4</option>
  </select>
 </p>
</form>

★UIに関わる部分---例えばカソールとか---は弄らないは原則です。
 すべてのユーザーがfirefoxやIE,Chrome使っているわけじゃない。
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
    • good
    • 0
この回答へのお礼

確かに、form要素をcssで無理やり変更するべきではないのでしょう。
今回はお客様からの希望でしたので、無理やり変えたかった次第です。
ご回答ありがとうございました。とりあえず、お客様へは納得してもらえ
そうです。

お礼日時:2014/04/14 10:32

ちなみに表示結果ですが・・

「SELECT要素の垂直位置」の回答画像2
    • good
    • 1

このQ&Aに関連する人気のQ&A

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

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

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

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

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

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

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

Aベストアンサー

<select style="width: 200px">

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

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

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

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

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

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

Aベストアンサー

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

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

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

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

Qform input テキストを上下中央に表示したい

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style><!--

form input {
margin-bottom:10px;
color:#fff;
border:none;
font-size:12px;
}

form input.mlmg-text {
width:150px; height:26px;
background-color:green;
padding:2px 5px;
text-align:center;
vertical-align:center;
}

form input.mlmg-buttton {
width:50px; height:30px;
color:#fff; background-color:blue;
vertical-align:bottom;
}
--></style>
</head>

<body>
<form method="post">
<input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい"><input type="button" class="mlmg-buttton" name="join" value="GO"><br />
<input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう"><input type="button" class="mlmg-buttton" name="resign" value="GO">
</form>
</body>
</html>

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

...続きを読む

Aベストアンサー

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプル</title>
<style type="text/css">
<!--
ul.hoge {
list-style: none;
margin: 0;
padding: 0;
}
ul.hoge li {
zoom: 100%;
margin-bottom: 10px;
}
ul.hoge li:after {
display: block;
clear: left;
height: 0;
visibility: hidden;
content: "";
}
ul.hoge input {
float: left;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
border: none;
color: #fff;
font-size: 12px;
}
ul.hoge input.mlmg-text {
width: 150px;
height: 1em;
padding: 0.5em;
background-color: green;
}
ul.hoge input.mlmg-buttton {
width: 50px;
height: 2em;
background-color: blue;
}
-->
</style>
</head>

<body>

<form method="post" action="#">
<ul class="hoge">
<li><input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい" /><input type="button" class="mlmg-buttton" name="join" value="GO" /></li>
<li><input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう" /><input type="button" class="mlmg-buttton" name="resign" value="GO" /></li>
</ul>
</form>

</body>
</html>
----------------------------------------------------------------------
ポイントは以下の様な点です。

・inputをulの子要素としてマークアップ(内容を見たところ、送信ボタンのリストの様ですので)。
・inputの余白や行の高さ等を初期化して、textタイプとbuttonタイプのベースのスタイルを揃える。
・inputをfloatで横並びにさせるので、親要素のliで回り込み状態をクリア。
・textタイプとbuttonタイプの高さを揃える。高さは相対的に計算ができる様にemで指定。
buttonタイプの場合は描画領域の高さに対して自動的にセンタリングされるので2emとし、textタイプの場合は要素(valueの値の文字部分)の高さを1emと考え、残りの1emを半分づつ上下paddingとして追加。

いかがでしょうか?

※今回の場合、"vertical-align: middle;"はinputの描画領域(ボックス)とvalueの値の文字部分との位置関係を示すものではないので、実現したいスタイルの為に適切なプロパティではありません。

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" ...続きを読む

Qプルダウンメニューで中央表示

プルダウンメニューで中央表示
HTMLのプルダウンメニューで文字を中央寄せにすることは可能でしょうか?
ページのレイアウト上、ボックスの幅を広くとっていて、
リストの文字が端によりすぎてしまうので、中央に表示したいのですが、
tableタグなどで使えるalignのようなものはないのでしょうか。
ご存知の方、教えていただけると助かります。
よろしくお願いします。

Aベストアンサー

ブラウザ次第ですね

firefoxだとtext-align:centerでできるんですがIEだと無効のようです。
どうしてもということであれば、fontをmonospaceにして
スペースでインデントするなどでごまかすとか・・・

<style>
select{
font-family:monospace;
}
</style>
<select>
<option value="">1</option>
<option value="">test</option>
<option value="">3</option>
</select>

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

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


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

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

Aベストアンサー

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

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

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

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

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


横幅については

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

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

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

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

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

Qプルダウンメニューの開く方向をコントロールしたいのですが

はじめまして、flyingmanと申します。いつも皆なさんの質問・回答で勉強させていただいて大変感謝しております。

さて今回、年・月・日・時を選択するために4つのプルダウンメニューをselectタグを使い作成したのですが、日指定のプルダウンメニューだけが、上方向に開いてしまいほかの3つのメニューと開く方向をそろえたいと色々調べておりますがなかなかいい方法が見つからないしだいです。
selectタグへのスタイル指定でそのようなことができるかどうか教えていただけないでしょうか?

環境
OS:WindowsXP SP2
ブラウザ:Internet Explorer Ver6.0 のみ

プルダウンメニューの開く方向は、プルダウンメニューの位置と開くメニューの高さで自動に決まってしまうのだろうとは思うのですが、位置をずらさずに開く方向だけを変更できる方法をご存知でしたら教えてください。
よろしくお願いいたします。

Aベストアンサー

#1補足>
補足ありがとうございました。
状況は確認できましたが、やはり、そのような指定をする設定はないようです。

Qプルダウンの表示位置

プルダウンを右端にセットしたいのですが、

右端というのは、画面ではなく、自分の設定した幅の右端という事です。

従って、DIVでALIGN="RIGHT"とかはウィンドウの大きさに対して動いてしまうのでダメです。

なにかいい方法があれば、よろしくお願いします。

Aベストアンサー

指定幅のテーブルを作り、その中で
  <td align="right">
   <select name="...">
   <option value="..">項目名1
        :
   </select>
  </td>
とする。
これでNNでも問題なく表示されますよ。

No.1の補足にある
  >プルダウンの中身がおかしくなる
とは、具体的にどうなるのですか?文字化けですか?

またブラウザのバージョンもお願いします。

Qselect optionのことで聞きたいことが

<select name="" id="" style="height:30px;line-height:30px;">
<option value="" id="item-1">あああ</option>
<option value="" id="item-2">あ</option>
<option value="" id="item-3">ああ</option>
</select>

optionの高さを広げて、さらに▼の位置を変えず、セレクトボックス内の文字位置をセレクトボックス内の縦の真ん中に持っていきたいと思っています。
現実的ではないのは分かっていますが、どうにかクロスブラウザに対応した方法があれば
教えてください。
ずっと悩んでいるのですが、答えが出ず教えてほしいです。
html cssでページはデザインしています。

Aベストアンサー

form select option{text-align:center;}

<select name="slect">
<option value="" selected>選択してください。
<option value="abc">あああ</option>
<option value="efg">あ</option>
<option value="hij">ああ</option>
</select>

 idはnameと同じでなければなりません、value="" id="item-1"はありえません。
 デフォルトの選択selectedを書いておきましょう。選択項目より長く

 text-alignに対応していないブラウザを考慮するなら
<select name="slect">
<option value="" selected>選択してください。
<option value="abc">  あああ  </option>
<option value="efg">   あ   </option>
<option value="hij">  ああ  </option>
</select>
しかないでしょう。

form select option{text-align:center;}

<select name="slect">
<option value="" selected>選択してください。
<option value="abc">あああ</option>
<option value="efg">あ</option>
<option value="hij">ああ</option>
</select>

 idはnameと同じでなければなりません、value="" id="item-1"はありえません。
 デフォルトの選択selectedを書いておきましょう。選択項目より長く

 text-alignに対応していないブラウザを考慮するなら
<select name="slect">
<option value="" selected>選択してください...続きを読む

Q