baserJSで装飾可能にしたセレクトボックスをiOSとAndroidに対応させる

Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト

通常の実装

サンプル

フォーカス状態によってオプション要素を表示する

CSSのコーディングのポイントは以下です。

.-bc-pseudo-select__option-list {
    display: none;
}
.-bc-pseudo-select--focus .-bc-pseudo-select__option-list {
  display: block;
}

フォーカスが当たると クラス-bc-pseudo-select--focusが付加されるのでそれを利用します。

スマートフォンの場合

iOS SafariやAndoroidブラウザの場合、セレクト要素を選択すると、ブラウザ独自の選択インターフェイスが表示させるので、こちらを出すようにします。

JSのイベントから呼び出すことは不可能なので、直接 select 要素をタップしてもらうようにしなければなりません。

なので実際の select 要素をボタンの大きさに広げ、絶対値とz-indexで手前に重ねて、透明化してしまうことで ボタンにタップするたびに 透明な select 要素をタップしている状態になります。

.-bc-form-select {
  /* 実際のselect要素 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10; /* 手前にもってくる */
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  opacity: 0; /* 透明にする */
}

/* 擬似的に生成された要素は表示しない */
.-bc-pseudo-select--focus .-bc-pseudo-select__option-list {
  /* display: block; */
}