Select

Select (선택)

select 클래스는 <select> HTML 요소를 감싸는 간단한 래퍼예요. 스타일링에 더 많은 유연성을 주고 아이콘을 지원해요. 색상·크기·상태 수정자를 지원해요.

출처: 문서

본문

select 클래스는 <select> HTML 요소를 감싸는 간단한 래퍼예요. 스타일링에 더 많은 유연성을 제공하고 아이콘도 지원해요.

Select dropdown · With options

<div class="select">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

다음 수정자들이 지원되며 각각에 영향을 줘요:

다중 선택 (Multiple select)

is-multiple 수정자와 multiple HTML 속성을 사용하면 다중 선택 드롭다운을 스타일링할 수 있어요.

Argentina · Bolivia · Brazil · Chile · Colombia · Ecuador · Guyana · Paraguay · Peru · Suriname · Uruguay · Venezuela

<div class="select is-multiple">
  <select multiple size="8">
    <option value="Argentina">Argentina</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Brazil">Brazil</option>
    <option value="Chile">Chile</option>
    <option value="Colombia">Colombia</option>
    <option value="Ecuador">Ecuador</option>
    <option value="Guyana">Guyana</option>
    <option value="Paraguay">Paraguay</option>
    <option value="Peru">Peru</option>
    <option value="Suriname">Suriname</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Venezuela">Venezuela</option>
  </select>
</div>

색상 (Colors)

is-link, is-primary, is-info, is-success, is-warning, is-danger 등 색상 수정자를 적용할 수 있어요.

<div class="select is-link">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

<div class="select is-primary">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

<div class="select is-info">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

<div class="select is-success">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

<div class="select is-warning">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

<div class="select is-danger">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

스타일 (Styles)

is-rounded 수정자를 붙이면 둥근 드롭다운을 만들 수 있어요:

Rounded dropdown · With options

<div class="select is-rounded">
  <select>
    <option>Rounded dropdown</option>
    <option>With options</option>
  </select>
</div>

크기 (Sizes)

select 요소는 4가지 크기로 제공돼요:

is-small, is-normal, is-medium, is-large 수정자를 적용할 수 있어요.

<div class="select is-small">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

<div class="select is-normal">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

<div class="select is-medium">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

<div class="select is-large">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

상태 (States)

Bulma는 select 요소의 다양한 상태를 스타일링해요. 각 상태는 의사 클래스(pseudo-class)와 CSS 클래스로 제공돼요:

  • :hover와 is-hovered
  • :focus와 is-focused
  • :active와 is-active

이를 통해 실제로 상태를 트리거하지 않고도 특정 상태의 스타일을 얻을 수 있어요.

일반 (Normal)

<div class="select">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

호버 (Hover)

<div class="select">
  <select class="is-hovered">
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

포커스 (Focus)

<div class="select">
  <select class="is-focused">
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

로딩 (Loading)

<div class="select is-loading">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

아이콘과 함께 쓰기 (With icons)

컨트롤에 수정자를 붙일 수 있어요:

  • has-icons-left

아이콘에도 수정자를 추가해야 해요:

  • has-icons-left를 사용했으므로 icon is-left

select의 크기가 아이콘 컨테이너의 크기를 결정해요.

Country · Select dropdown · With options

<div class="control has-icons-left">
  <div class="select">
    <select>
      <option selected>Country</option>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
  <div class="icon is-small is-left">
    <i class="fas fa-globe"></i>
  </div>
</div>

컨트롤에 아이콘이 있으면, Bulma는 입력이나 아이콘의 크기와 관계없이 아이콘이 가운데 유지되도록 보장해요.

<div class="control has-icons-left">
  <div class="select is-small">
    <select>
      <option selected>Country</option>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
  <span class="icon is-small is-left">
    <i class="fas fa-globe"></i>
  </span>
</div>

<div class="control has-icons-left">
  <div class="select">
    <select>
      <option selected>Country</option>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
  <span class="icon is-left">
    <i class="fas fa-globe"></i>
  </span>
</div>

<div class="control has-icons-left">
  <div class="select is-medium">
    <select>
      <option selected>Country</option>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
  <span class="icon is-medium is-left">
    <i class="fas fa-globe"></i>
  </span>
</div>

<div class="control has-icons-left">
  <div class="select is-large">
    <select>
      <option selected>Country</option>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
  <span class="icon is-large is-left">
    <i class="fas fa-globe"></i>
  </span>
</div>

더 알아보기 (Learn more)