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

  • 0
    いいね
  • 0
    コメント
    この記事は最終更新日から1年以上が経過しています。

    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; */
    }