DanWebb
6/26/2015 - 6:42 AM

Example of styled select box with just CSS. Live example here: http://www.mychildrensboutique.co.uk/

Example of styled select box with just CSS. Live example here: http://www.mychildrensboutique.co.uk/

select{
    /* remove arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* bootstrapify corners */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    /* girlify it */
    border: 1px solid #ffd2eb;
    background: url(my-arrow.png) no-repeat center right;
    min-width: 135px;
    line-height: 28px;
    padding: 0 4px;
}

/* Kill IE arrow */
select::-ms-expand {
    display: none;
}

/**

select{
  @include prefix(appearance, none, webkit moz);
  background: url('{{ "select-arrow.png" | asset_url }}') no-repeat center right;
  background-color: $white;
  background-position: 95%;
  background-size: 11px 8px;
  border: 0;
  border-radius: 0;
  line-height: 28px;
  min-width: 172px;
  padding: 0 4px;
}

// Kill IE arrow
select::-ms-expand {
  display: none;
}

*/