その１
HTMLのフォームでは、SelectBoxとListBoxとして使える<select>というタグがあります。
しかし、このタグではあらかじめ準備された文字列か、JavaScriptで追加生成してしか選択できない。
テキストボックスに▼ボタンを付けて、テキストを切り替えたり、直接入力できるものはComboBoxと呼ぶそうで、フォームではサポートされていない。
Ajaxを使ったサンプルもあったもののかなり構造が複雑だったので、無理矢理それっぽく作ってみた。
<input type="text"><select><option></select>
と並べておいて、selectタグをCSSでwidth:20pxに設定した。
Firefoxでは、左側に少し枠ができて、▼が右にずれて表示される。▼を押すと選択肢が表示される。
IE8では、表示は綺麗に見えるが、▼を押すとその幅のまま選択肢が表示されるため、中身が判らない。
iPadでは、表示に異常が発生する。その一行分だけ白く網掛けのようになってしまう。21px以上にすると直るため、22pxで丁度綺麗な表示となる。
IE8の表示の修正には別の方法を考える必要がありそうだ。
その２
もう１つは<input>と<select>を重ねて作る方法。iPadでは綺麗に重なるが、FirefoxやIE8では上下にずれてしまう。最終的にはブラウザに応じて使い分けるのが良いかも。
<div class="divClass"><input type="text" class="inpClass"><select class="selClass"><option></select></div>
タグは上記のようになる。ボタンをCSSで重ねるために、divが土台となっている。
.divClass {
position:relative;
}
.inpClass {
width: 200px;
position: absolute;
top: 0px;
left: 0px;
}
.selClass {
width: 220px;
}
selClass にも absolute を割り当てるとボタンの位置が揃うが、続きにボタンがある場合、それらが上記のボタンに隠れてしまう。そのため、selClassの幅を生かすことにした。
テスト用ページを作成した。http://www.shurey.com/js/labo/combobox.html