OP-가이드-Select Box

Select Box (조립형) .select-box · 트리거+패널 조립 · JS 토글

<div class="select-box">
  <button type="button" class="select-trigger">
    <span class="select-value is-placeholder">선택</span>
  </button>
  <ul class="select-dropdown">
    <li class="select-option" data-value="rep">대표파트너</li>
    <li class="select-option" data-value="partner">파트너</li>
  </ul>
  <input type="hidden" class="select-input" name="partnerType">
</div>

<!-- 비활성: .select-box 에 is-disabled + 트리거 disabled -->
<!-- Hover/Open 은 :hover / .is-open(JS) 으로 자동 -->

Normal (클릭해 보세요)

Disabled

Open (.is-open · 선택 항목 .is-active)

Select Box — Small .select-box--sm · 30px · 14-M · 컴팩트 필터용 (normal/hover/열림/disabled)

<div class="select-box select-box--sm">
  <button type="button" class="select-trigger">
    <span class="select-value">Text</span>
  </button>
  <ul class="select-dropdown">
    <li class="select-option" data-value="1">Text</li>
    <li class="select-option" data-value="2">Text</li>
  </ul>
</div>

<!-- 열림: .is-open(JS) · 비활성: .is-disabled + 트리거 disabled -->
<!-- hover 는 :hover 로 자동 -->

Normal / Hover (마우스 올려보세요)

Open / Selected (.is-open)

Disabled (.is-disabled)

Select + Button .input-group

<div class="input-group">
  <div class="select-box">...</div>
  <button type="button" class="btn btn-line">Text</button>
</div>