カスタムドロップダウン

<div class="d04-02-06-dd">
          <button type="button" class="d04-02-06-btn" aria-expanded="false">
            <span class="d04-02-06-val">お問い合わせ項目を選択</span>
            <svg class="d04-02-06-arrow" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 6l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
          <ul class="d04-02-06-list">
            <li>製品について</li>
            <li>お見積り依頼</li>
            <li>採用について</li>
            <li>その他</li>
          </ul>
        </div>

.d04-02-06-dd{position:relative;width:min(260px,100%)}
        .d04-02-06-btn{
          width:100%;display:flex;align-items:center;justify-content:space-between;
          gap:8px;padding:13px 16px;font-size:14px;color:#333;
          background:#fff;border:2px solid #d5d9e0;border-radius:10px;
          cursor:pointer;transition:border-color .25s;
        }
        .d04-02-06-dd.is-open .d04-02-06-btn{border-color:#4a6cf7}
        .d04-02-06-arrow{transition:transform .3s;color:#8a93a3;flex:0 0 auto}
        .d04-02-06-dd.is-open .d04-02-06-arrow{transform:rotate(180deg)}
        .d04-02-06-list{
          position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:5;
          margin:0;padding:6px;list-style:none;background:#fff;
          border:1px solid #e2e6ee;border-radius:10px;
          box-shadow:0 10px 25px rgba(30,40,80,.15);
          opacity:0;visibility:hidden;transform:translateY(-8px);
          transition:opacity .25s,transform .25s,visibility .25s;
        }
        .d04-02-06-dd.is-open .d04-02-06-list{opacity:1;visibility:visible;transform:translateY(0)}
        .d04-02-06-list li{
          padding:10px 12px;font-size:14px;color:#444;border-radius:7px;cursor:pointer;
          transition:background .15s,color .15s;
        }
        .d04-02-06-list li:hover{background:#eef2ff;color:#4a6cf7}

(function(){
        var dd=document.querySelector('.d04-02-06-dd');
        if(!dd)return;
        var btn=dd.querySelector('.d04-02-06-btn');
        var val=dd.querySelector('.d04-02-06-val');
        btn.addEventListener('click',function(){
          var open=dd.classList.toggle('is-open');
          btn.setAttribute('aria-expanded',open?'true':'false');
        });
        dd.querySelectorAll('.d04-02-06-list li').forEach(function(li){
          li.addEventListener('click',function(){
            val.textContent=li.textContent;
            dd.classList.remove('is-open');
            btn.setAttribute('aria-expanded','false');
          });
        });
        document.addEventListener('click',function(e){
          if(!dd.contains(e.target)){
            dd.classList.remove('is-open');
            btn.setAttribute('aria-expanded','false');
          }
        });
      })();