Better Select Component

jsbin.IsITOpa.css

.SuperSelect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
}

.SuperSelect-caixa {
  display: block;
  border: 1px solid #ccc;
  width: 200px;
  overflow: hidden;
  
  background: #fff;
  background: -ms-linear-gradient(top, #fff 0%, #f3f3f3 50%, #ededed 51%, #fff 100%);
  background: -moz-linear-gradient(top, #fff 0%, #f3f3f3 50%, #ededed 51%, #fff 100%);
  background: -webkit-linear-gradient(top, #fff 0%, #f3f3f3 50%, #ededed 51%, #fff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 );

  text-shadow: 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff;
  padding: 6px 8px;
  font-size: 14px;
  font-family: Verdana, sans-serif;
  color: #999;
  border-radius: 5px;
  -webkit-tap-highlight-color: transparent;
}

.SuperSelect-caixa:hover {
  border: 1px solid #999;
}

.SuperSelect-caixa.taAberto {
  background: #fff;
  background: -ms-linear-gradient(top, #e5e5e5 0%, #fff 75%);
  background: -moz-linear-gradient(top, #e5e5e5 0%, #fff 75%);
  background: -webkit-linear-gradient(top, #e5e5e5 0%, #fff 75%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );

  border-radius: 5px 5px 0 0;
  border-color: #999;
  border-bottom-width: 0;
  padding-bottom: 7px; /* compensa o 1px removido da borda inferior */
}

.touch .SuperSelect-caixa.taAberto {
  padding-bottom: 6px; /* reverte o enchimento inferior normal */
  border-radius: 5px;
  border-bottom-width: 1px;
}

.SuperSelect-texto.taSelecionada {
  color: #333;  
}

.SuperSelect-seta {
  float: right;
  padding: 6px 0 0;
  height: 5px;
}

.SuperSelect-caixaSelecao {
  position: absolute;
  top: 30px;
  left: 0;
  color: #333;
  width: 218px;
  padding: 6px;
  border: 1px solid #999;
  border-top: 0;
  margin-top: 0;
  display: none;
  font-size: 14px;
  z-index: 10;
}

.touch .SuperSelect-caixaSelecao {
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-appearance: none;
}

.SuperSelect-caixaSelecao:focus {
  outline: 0;
}





.BlocoGenerico-conteinerSeletor {
  width: 170px;
}


/**
 * SELETOR
 */



.Seletor {
  position: relative;
}

.Seletor-botao {
  display: block;
  overflow: hidden;
  padding: 6px 8px;
  font-size: 14px;
  font-family: Verdana, sans-serif;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-tap-highlight-color: transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Seletor--corPadrao .Seletor-botao {
  background: #fff;
  background: -ms-linear-gradient(top, #fff 0%, #f3f3f3 50%, #ededed 51%, #fff 100%);
  background: -moz-linear-gradient(top, #fff 0%, #f3f3f3 50%, #ededed 51%, #fff 100%);
  background: -webkit-linear-gradient(top, #fff 0%, #f3f3f3 50%, #ededed 51%, #fff 100%);
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 0 #fff;
  color: #999;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#f3f3f3',GradientType=0);
  text-shadow: 0 1px 0 #fff;
}

.Seletor--corPadrao .Seletor-botao:hover {
  border: 1px solid #999;
}

.Seletor--corPadrao.ta-focado .Seletor-botao {
  border-color: #f00
}

.no-cssgradients .Seletor--corPadrao .Seletor-botao {
  background: url(./imgFundoSeletor.png) repeat-x;
}

.Seletor--corPadrao .Seletor-valor {
  color: #333;
}

.Seletor-seta {
  float: right;
  margin-left: 5px;
  margin-top: 6px;
  height: 5px;
}

.Seletor-caixaSelecao {
  border: 0;
  height: 30px;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
}









/**
 * UTILITÁRIOS
 */

.u-setaBaixo {
  display: block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
}

.u-clicavel {
  cursor: pointer;
}

.u-escondido {
  display: none;
}

.u-textoAbafado {
  color: #ccc;
}

.u-textoCodigo {
  font-family: monospace;
}

.u-invisivel {
  *zoom: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-appearance: none;
  opacity: 0;
}

jsbin.IsITOpa.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Caixa de seleção alternativa</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Alternativa leve e personalizável de caixa de seleção.">
</head>
<body>
  <p>Alternativa #1:</p>
  <div class="SuperSelect">
    <label class="SuperSelect-caixa u-taClicavel js-abrirCaixaSelecao">
      <span class="SuperSelect-seta"><span class="u-setaBaixo"></span></span>
      <span class="SuperSelect-texto">Produtor</span>
    </label>
    <select class="SuperSelect-caixaSelecao js-selecionarOpcao" name="qtd">
      <option selected disabled></option>
      <option value="">Bodega Barberis (1)</option>	
      <option value="">Bodegas Trapiche (6)</option>	
      <option value="">Casa Rivas (3)</option>
      <option value="">Dominio Del Plata (3)</option>
      <option value="">Finca La Celia (2)</option>
      <option value="">Herdade do Esporão (4)</option>
      <option value="">Lagarde (2)</option>
      <option value="">Miguel Torres (1)</option>
      <option value="">Miguel Torres (Chile) (2)</option>
      <option value="">Miolo (7)</option>
      <option value="">Quinta da Bacalhôa (1)</option>
      <option value="">Quinta do Crasto (4)</option>
      <option value="">Santa Helena (5)</option>
      <option value="">Ventisquero (4)</option>
      <option value="">Viña Amalia (6)</option>
      <option value="">Viña Canepa (1)</option>
      <option value="">Viña Concha y Toro (6)</option>
      <option value="">Viña Santa Rita (3)</option>	
      <option value="">Viña Tarapacá (14)</option>
      <option value="">Viña Ventisquero (4)</option>
    </select>
  </div>
  
  <p>Alternativa #2:</p>
  
  <div class="BlocoGenerico-conteinerSeletor">
    <div class="Seletor Seletor--corPadrao">
      <div class="Seletor-botao u-clicavel">
        <span class="Seletor-seta"><span class="u-setaBaixo"></span></span>
        <label class="Seletor-rotulo">Ordenar:</label>
        <span class="Seletor-valor js-valorOpSelecionada">Produto em destaque</span>
        <select class="Seletor-caixaSelecao u-invisivel js-selOpcao u-clicavel">
          <option value="">Mais vendidos</option>
          <option value="" selected>Produto em destaque</option>
          <option value="">Nome do produto</option>
          <option value="">Preço mínimo ao máximo</option>
          <option value="">Preço máximo ao mínimo</option>
        </select>
      </div>
    </div>
  </div>
  
  <p id="opcaoSelecionada" class="u-textoAbafado u-textoCodigo">Selecione uma opção...</p>
  
  <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>

jsbin.IsITOpa.js

var toggleSelectBox = function(box, size) {
  var isOpened,
      selectBox = box.next(),
      optionsLength = selectBox.children().length;

  var selectBoxHeight = size || (optionsLength > 20) ? optionsLength - 5 : optionsLength;
  
  box.toggleClass('taAberto');
  
  isOpened = box.hasClass('taAberto');
  
  if (isOpened) {
    selectBox.prop('size', size).show().focus();
  } else {
    selectBox.hide().blur();
  }
};

var selectOption = function(selectBox) {
  var selectedOption = selectBox.find(':selected'),
      box = selectBox.prev(), boxText = box.find('.SuperSelect-texto');
  boxText.text(selectedOption.text()).addClass('taSelecionada');
  selectBox.hide().blur();
  toggleSelectBox(box);
};

$('.js-abrirCaixaSelecao').on('click', function() {
  var $this = $(this);  
  toggleSelectBox($this, 10);
});

$('.js-selecionarOpcao').on('change', function() {
  var $this = $(this);
  selectOption($this);
});

$('.js-selecionarOpcao option').on('mouseover', function() {
  $(this).css('background-color', '#ddd');
}).on('mouseout', function() {
  $(this).css('background-color', '#fff');
});






/**
 * SELETOR
 */

$('.js-selOpcao').on('change', function() {
  var $this = $(this),
      selectedOptionText = $this.find(':selected').text(),
      $selectedOption = $('#opcaoSelecionada');
  $('.js-valorOpSelecionada').text(selectedOptionText);
  $selectedOption.removeClass('u-textoAbafado').text(selectedOptionText);
});

$('.Seletor').on('focusin', function() {
  var $this = $(this);
  $this.addClass('ta-focado');
}).on('focusout', function() {
  var $this = $(this);
  $this.removeClass('ta-focado');
});