はじめに
セレクトボックスの選択肢の位置を変えてほしいと依頼がありました。
どういうことかと言うと、
これを
こうしたい
調べてみる
- option要素はwidthが効かない
- optionではなくul、liタグを使おう
出来ないという情報しかない…
どうするか
とりあえず、作ってみました。
See the Pen Untitled by masayasu_t (@cjlsrdxi-the-builder) on CodePen.
ソースを見ていただけば理解いただけると思いますが、見えているセレクトボックスの上に見えないセレクトボックスを重ねています。
つまり、こう言うことです。
見えないセレクトボックスは「opacity: 0;」で隠しています。
「visibility: hidden;」だとマウスイベントが取れませんが、「opacity: 0;」だと着火します。
なので、見えないセレクトボックスのエリアをクリックすると選択肢が表示されます。
そして、そのままでは選択したデータが見えているセレクトボックスに反映されないので、javascriptで選択した値を移しています。
おわりに
ここまでする必要があるのかと思いますが、「できません」ではつまらないので作ってみました。
「opacity: 0;」で隠すのは色々と応用できそうな気がします。