Utilizamos o Select2 para customizar nossos selects. Ele é o plugin mais completo e acessível que encontramos.

Para utilizá-lo é simples, basta usar a classe customSelect no select que você quer customizar e pronto.

O atributo data-placeholder mostra uma frase no select para indicar alguma instrução para o usuário.

Para melhor usabilidade, quando houverem mais de 20 itens no select, nós mostramos automaticamente um input de search no select. Assim facilitamos a procura de opções.

Múltiplas escolhas

Para selects com múltiplas escolhas o Chose modifica de forma que o visual fica com o abaixo:

  <select class="customSelect span4" data-placeholder="Escolha um país">
      <optgroup label="Alaskan/Hawaiian Time Zone">
          <option value="AK">Alaska</option>
          <option value="HI">Hawaii</option>
      </optgroup>
      <optgroup label="Central Time Zone">
          <option value="AL">Alabama</option>
          <option value="AR">Arkansas</option>
          <option value="IL">Illinois</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
      </optgroup>
      <optgroup label="Eastern Time Zone">
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
      </optgroup>
  </select>