size属性はoption要素数が3以上でも2で良い。その都合上CSSでheightを1行分に調整する必要がある。邪魔なscroll barは消す。実装は以下の通り。
float系
昔ながらの邪道。chrome系Browserは問題無いっぽいのだが、何やらFirefoxさんの様子がおかしいぞ…。
<style>
select{clear:both;height:1.5em;overflow:hidden}
option{float:left;outline:1px solid #444}
option:checked{background:#faa;color:red}
</style>
<select size=2><option>Yes!<option>Yeah!<option>OK!</select>
select要素の外枠排除
<style>
select{clear:both;height:2em;overflow:hidden;border:0;outline:0}
option{float:left;outline:1px solid #444;padding:3px}
option:checked{background:#faa;color:red}
</style>
<select size=2><option>渦璧 過短<option>風吹 好淡<option>阿生蟹 巣単</select>
optgroup要素追加
<style>
select{overflow:hidden;height:3em}
optgroup{clear:both;height:2em;font-style:normal}
optgroup option{float:left;border:1px solid #444;height:1em;padding:2px 3px}
option:checked{background:#faa;color:red}
</style>
<select size=2><optgroup label="You have a choice"><option>袋田 滝打<option>柴北 雄是<option>土追 樽歪<option>物飛 婆好</select>
inline-block系
float系よりはましかも。option要素のdisplay:inline-blockが肝になる。
<style>
select{height:2em;overflow:hidden;border:0;outline:0}
option{border:1px solid #444;padding:3px;display:inline-block}
option:checked{background:#faa;color:red}
</style>
武器<select size=2><option>ドスタンダーソード<option>ドノーマルブレード<option>ドマイナーナイフ<option>ドメジャーナダガー</select>
flex系
optgroup要素は必須かも
<style>
select{overflow:hidden;height:2em}
optgroup{display:flex;font-style:normal}
optgroup option{border:1px solid #444;height:1em;padding:2px 3px}
option:checked{background:#faa;color:red}
</style>
<select size=2><optgroup label="頭"><option>バッカーヘッド<option>ドア ホーン<option>ヒヤリー ハット<option>ドエレー帽</select>
grid系
optgroup要素は必須っぽい。肝になるのはgrid:auto/auto;grid-auto-flow:columnという指定。
<style>
select{overflow:hidden;height:2em}
optgroup{display:grid;grid:auto/auto;grid-auto-flow:column;font-style:normal}
optgroup option{border:1px solid #444;height:1em;padding:2px 3px}
option:checked{background:#faa;color:red}
</style>
<select size=2><optgroup label="体"><option>薄着たない服<option>ぽっぷるメイル<option>甘アーマー</select>
option要素のmargin設定で隙間を作り、ついでにborder-radius設定でselect要素らしくない見た目。
<style>
select{overflow:hidden;height:2.5em;border:1px solid #668}
optgroup{
display:grid;grid:auto/auto;
grid-auto-flow:column;
font-style:normal
}
optgroup option{
border:2px solid #44f;
border-radius:4px;
height:1em;
padding:2px 3px;
margin:3px
}
option:checked{background:#aaf;color:blue}
</style>
<select size=2><optgroup label="種族"><option>暴走族<option>家族<option>魔族<option>金属</select>
応用するとtable要素っぽくできる。select要素のheightは設定不要。size属性は行数と同じにする。以下は3 x 3の表形式。
<style>
select{overflow:hidden}
optgroup{display:grid;grid:auto auto auto/auto auto auto;font-style:normal}
optgroup option{border:1px solid #444;height:1em;padding:2px 3px}
option:checked{background:#faa;color:red}
</style>
<select size=3><optgroup label="出身地">
<option>2本<option>スットン共和国<option>鍛挑戦
<option>腐乱巣<option>ソレフガルド<option>アフリカン冗区
<option>ディラックの海<option>B地区
</select>
optgroupで行数増やして表形式もどきにする手もある。ただし調整しないとマス目の幅がばらつく。
<style>
select{overflow:hidden;border:1px solid #668;display:block}
optgroup{
display:grid;grid:auto/auto;
grid-auto-flow:column;
font-style:normal
}
optgroup option{
border:2px solid #44f;
border-radius:4px;height:1em;
padding:2px 3px;
margin:3px
}
option:checked{background:#aaf;color:blue}
</style>
Game選択
<select size=3>
<optgroup label=RPG><option>Final Fantasy<option>Last Fantasy<option>Infinity Fantasy
<optgroup label=ACT><option>Final Fight<option>Last Fight<option>Infinity Fight
<optgroup label=STG><option>Finality Blast<option>Lasty Blast<option>Infinity Blast
</select>
ここまで全ての系列に言える事だが、一部のBrowserはCSSでoverflow:hiddenを指定してもscroll barが消えやがらなかったり、option:checked{background:#faa;color:red}が効きやがらない。勿論Firefoxなどとは一言も言ってないぞ。
使い所
これの何が良いのかと言うと、<input type=radio name=xxx>の上位互換となり得る点だ。例えば以下のような点だ。
- 選択している事が分かり易い
- 的が大きいので選択し易い
- JavaScriptの処理で横着できる
- htmlの記述が楽
(3)に関してはselectedIndex、options[..].text、valueといった値が便利。
とはいえ、横型select要素は大量のoption要素を抱え込むと使い勝手が悪くなる。option要素の文字列がクソ長い場合にも不向きだ。そういう場合は大人しく縦型のselect要素を使うべきだろう。
input要素でも以下のようにすれば(1)と(2)に対応できる。いちいちname属性を揃えたり、label要素で囲んだりが面倒である
<style>
/*丸点消し*/
.radio input[type=radio]{display:none}
/*囲い*/
.radio input[type=radio]+label{padding:3px;border:1px solid #444;cursor:pointer}
/*選択強調表示*/
.radio input[type=radio]:checked+label{background:#aaa}
/*触れた時の変化*/
.radio input[type=radio]+label:hover{background:#ccc}
</style>
<p class=radio>
<input type=radio name=r id=r0><label for=r0>FF?</label>
<input type=radio name=r id=r1><label for=r1>255?</label>
<input type=radio name=r id=r2><label for=r2>SaGa!</label>
</p>
どうでもいい使用例
<style>
select{overflow:hidden;height:2em}
optgroup{display:flex;font-style:normal}
optgroup option{border:1px solid #444;height:1em;padding:2px 3px}
</style>
<h2>職業適性検査</h2>
<select size=2><optgroup label="イチモツ"><option>アリ<option>ナシ</select>
<select size=2><optgroup label="利き腕"><option>左<option>ミギー<option>ナシ</select>
<select size=2><optgroup label="ケツ液型"><option>大型<option>新潟<option>銭形<option>クワガタ</select>
<select size=2><optgroup label="思考回路"><option>文系<option>理系</select>
<textarea id=t style="width:100%" rows=8></textarea>
<script>{
let s=document.getElementsByTagName("select");
for(let a of s)a.selectedIndex=0;
onchange=e=>{
let a="力士に"+(s[0].selectedIndex?"なれないっぽい":"なれます"),
b=["剣道家として天下をとれそう","規格外の力を秘めています","逸材です。何でも両立できそう"][s[1].selectedIndex]||"",
c=["癒し系の使い手として多くの命を蹂躙できそう","無慈悲に愛する事で役立てそう","人のケツをツケ回すのが得意そう","裁断官になれます"][s[2].selectedIndex]||"",
d=s[3].selectedIndex?"困難で簡単な仕事が向いてそう":"単調で複雑な作業が向いていそう";
t.value=a+"\n"+b+"\n"+c+"\n"+d
}
}</script>