ComboBox

コンボボックスを実現できるかどうかのテスト

IE = IE9 / FF = Firefox 20 / Sa = Safari 5.1.7 / Cr = Chrome 26 / iP = iOS 6.1.3 (Safari)

CSS HTML IE FF Sa Cr iP
(1)基本フォーム ○ ○ ○ ○ ○
パーツは３つ。テキストフィールド、セレクトボックス、ボタン。 
.textField {
 font-size: 14px;
 width: 100px;
}
.bsize {
 font-size: 14px;
}
 
<input name="textfield" type="text" class="textField" id="tField0">
<select name="select" class="bsize" id="selBox0" onChange="getSelect(0,this.value)">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
<input type="button" class="bsize" value="ボタン" onclick="getText(0)">
CSS HTML IE FF Sa Cr iP
(2)セレクトボックスを縮小 ○ ○ ○ ○ ○
セレクトボックスを「width:22px」にする。（20px以下ではiPadで表示が異常）
IE8では、セレクトボックスをクリックすると幅が狭いままで中身が見えない。IE9で改善。		 
#selBox1 {
 font-size: 14px;
 width: 22px;
}
 
<input name="textfield" type="text" class="textField" id="tField1">
<select name="select" class="selectBox" id="selBox1" onChange="getSelect(1,this.value)">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
<input type="button" class="bsize" value="ボタン" onclick="getText(1)">
CSS HTML IE FF Sa Cr iP
(3)CSSで重ねる
○ △ ○ ○ ×
iPadではセレクトボックスの幅が狭くて見えない。Firefoxで上下にずれ、IE8では大きくずれたがIE9では若干上下にずれるが丁度良い。 
#comboField {
 position: relative;
}
#tField2 {
 font-size: 14px;
 width: 100px;
 position: absolute;
 left: 0px;
 top: 0px;
}
#selBox2 {
 font-size: 14px;
 width: 120px;
}

<div id="comboField">
<input name="textfield" type="text" class="textField" id="tField2">
<select name="select" class="selectBox" id="selBox2" onChange="getSelect(2,this.value)">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
<input type="button" class="bsize" value="ボタン" onclick="getText(2)">
</div>
CSS HTML IE FF Sa Cr iP
(4)datalistを使う × ○ × ○ ×
HTML5で規定された<datalist>タグを使う。
テキストフィールドを入力状態でクリックするか、「t」から入力を始めると選択肢が表示される。
IEでは、<option>のテキストが表示されてしまう。
  
<input name="textfield" type="text" class="textField" id="tField3" list="combolist">
<input type="button" class="bsize" value="ボタン" onclick="getText(3)">
<datalist id="combolist">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</datalist>
CSS HTML IE FF Sa Cr iP
             
             

Back