CSSに関するメモ【ComboBox】

その１

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