zqMRGW

index.jade

select(id='mealType' name='mealType')
  option(value='breakfast') Breakfast
  option(value='lunch') Lunch
  option(value='dinner') Dinner
  option(value='snack') Snack

script.coffeescript

(($) ->
  $ ->
    $('select').wrap '<div class="select" />'
) jQuery

style.stylus

select
  appearance none
  display block
  width 100%
  padding 0.5em 2em 0.5em 0.5em
  border none
  outline none
  background-color transparent
  
  &:focus,
  &:hover,
  &:active
    outline none

.select
  display inline-block
  overflow hidden
  position relative
  border 1px solid #333

  &::after
    content ''
    display block
    width 0
    transform translateY(-50%)
    position absolute
    top 50%
    right 0.5em
    border 0.5em solid transparent
    border-width 0.5em 0.5em 0
    border-top-color #333
    pointer-events none