Styling selectors purely with CSS and minimal JS

_select.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

index.jade

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

select.coffee

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