This website requires JavaScript to deliver the best possible experience.

Select

    <select class="select">
      <option>Select dropdown</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
    select.select
      option Select dropdown
      option Option 1
      option Option 2
      option Option 3
      <select class="select is-tiny">
        <option>is-tiny</option>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      
      <select class="select is-small">
        <option>is-small</option>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      
      <select class="select is-normal">
        <option>is-normal</option>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      
      <select class="select is-large">
        <option>is-large</option>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      
      <select class="select is-massive">
        <option>is-massive</option>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      select.select.is-tiny
        option is-tiny
        option Option 1
        option Option 2
      
      select.select.is-small
        option is-small
        option Option 1
        option Option 2
      
      select.select.is-normal
        option is-normal
        option Option 1
        option Option 2
      
      select.select.is-large
        option is-large
        option Option 1
        option Option 2
      
      select.select.is-massive
        option is-massive
        option Option 1
        option Option 2
        <select class="select is-primary">
          <option>Select dropdown</option>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
        
        <select class="select is-secondary">
          <option>Select dropdown</option>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
        
        <select class="select is-info">
          <option>Select dropdown</option>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
        
        <select class="select is-success">
          <option>Select dropdown</option>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
        
        <select class="select is-warning">
          <option>Select dropdown</option>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
        
        <select class="select is-danger">
          <option>Select dropdown</option>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
        
        <select class="select is-black">
          <option>Select dropdown</option>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
        
        <select class="select is-white">
          <option>Select dropdown</option>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
        select.select.is-primary
          option Select dropdown
          option Option 1
          option Option 2
        
        select.select.is-secondary
          option Select dropdown
          option Option 1
          option Option 2
        
        select.select.is-info
          option Select dropdown
          option Option 1
          option Option 2
        
        select.select.is-success
          option Select dropdown
          option Option 1
          option Option 2
        
        select.select.is-warning
          option Select dropdown
          option Option 1
          option Option 2
        
        select.select.is-danger
          option Select dropdown
          option Option 1
          option Option 2
        
        select.select.is-black
          option Select dropdown
          option Option 1
          option Option 2
        
        select.select.is-white
          option Select dropdown
          option Option 1
          option Option 2
          <select class="select is-primary is-rounded">
            <option>Select dropdown</option>
            <option>Option 1</option>
            <option>Option 2</option>
          </select>
          
          <select class="select is-secondary is-rounded">
            <option>Select dropdown</option>
            <option>Option 1</option>
            <option>Option 2</option>
          </select>
          
          <select class="select is-info is-rounded">
            <option>Select dropdown</option>
            <option>Option 1</option>
            <option>Option 2</option>
          </select>
          
          <select class="select is-success is-rounded">
            <option>Select dropdown</option>
            <option>Option 1</option>
            <option>Option 2</option>
          </select>
          
          <select class="select is-warning is-rounded">
            <option>Select dropdown</option>
            <option>Option 1</option>
            <option>Option 2</option>
          </select>
          
          <select class="select is-danger is-rounded">
            <option>Select dropdown</option>
            <option>Option 1</option>
            <option>Option 2</option>
          </select>
          
          <select class="select is-black is-rounded">
            <option>Select dropdown</option>
            <option>Option 1</option>
            <option>Option 2</option>
          </select>
          
          <select class="select is-white is-rounded">
            <option>Select dropdown</option>
            <option>Option 1</option>
            <option>Option 2</option>
          </select>
          select.select.is-primary.is-rounded
            option Select dropdown
            option Option 1
            option Option 2
          
          select.select.is-secondary.is-rounded
            option Select dropdown
            option Option 1
            option Option 2
          
          select.select.is-info.is-rounded
            option Select dropdown
            option Option 1
            option Option 2
          
          select.select.is-success.is-rounded
            option Select dropdown
            option Option 1
            option Option 2
          
          select.select.is-warning.is-rounded
            option Select dropdown
            option Option 1
            option Option 2
          
          select.select.is-danger.is-rounded
            option Select dropdown
            option Option 1
            option Option 2
          
          select.select.is-black.is-rounded
            option Select dropdown
            option Option 1
            option Option 2
          
          select.select.is-white.is-rounded
            option Select dropdown
            option Option 1
            option Option 2
            <select class="select is-disabled">
              <option>Select dropdown</option>
              <option>Option 1</option>
              <option>Option 2</option>
            </select>
            select.select.is-disabled
              option Select dropdown
              option Option 1
              option Option 2
            ModifierDescriptionClass
            Colorindicates the element state

            .is-black

            .is-white

            .is-primary

            .is-secondary

            .is-info

            .is-success

            .is-warning

            .is-danger

            Sizechanges the element size based on font-size

            .is-tiny

            .is-small

            .is-normal

            .is-large

            .is-massive

            Roundedadd rounded corners to a select.is-rounded
            Disabledindicates that the input is disabled.is-disabled

            You can extend the select component features by adding the Select extension.