2020/10/17

セレクトボックスを装飾する

ちょっとリッチなセレクトボックス。

See the Pen 201017_セレクトボックスを装飾する by nekuta (@nekuta) on CodePen.

セレクトボックスのスタイル自体を透明にする

.select {
  &-wrap {
    position: relative;
    width:300px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    select {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }

〜中略〜

}

セレクトボックス自体をabsoluteにして、.select-wrapの縦横いっぱいに伸ばし、opacityを0にします。
そうすると.select-wrapをクリックするとセレクトボックスも一緒に発火します。

セレクトボックスの値が変わったらテキストを変更する

このままだとセレクトボックスの値を変更しても、表示されているテキスト（ここでは.select-ttl-txt）をjavascriptで変更します。
セレクトボックスが変更されたらイベントが走る様にしたいので、addEventListenerのchangeを使いました。

let selectWrap = document.getElementsByClassName('select-wrap');

  if (0 < selectWrap.length) {
    function selectChange(e) {
      var _this = e.currentTarget;
      var _thisSelectWrap = _this.closest('.select-wrap');
      //targetElement.closest(selectors);でtargetElementを含んでいる親要素からselectorsを検索する

      var _thisTarget = _thisSelectWrap.getElementsByClassName('select-ttl-txt')[0];
      _thisTarget.textContent = _this.value;//テキストを書き換え
    }
    for (let a = 0; a < selectWrap.length; a++) {
      var _target = selectWrap[a].querySelector('select');
      //セレクトボックスがchangeされたらselectChange(e)が発火する
      _target.addEventListener('change', function (e) {
        selectChange(e);
      });
    }
  }