Skip to content

Instantly share code, notes, and snippets.

@nguyenj

nguyenj/_select.stylus

Created May 2, 2016 16:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nguyenj/3af389038c65e4ce985d90f1a5c00af3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nguyenj/3af389038c65e4ce985d90f1a5c00af3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nguyenj created this gist May 2, 2016.
    32 changes: 32 additions & 0 deletions _select.stylus
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    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
    5 changes: 5 additions & 0 deletions index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    select(id="mealType" name="mealType")
    option(value="breakfast") Breakfast
    option(value="lunch") Lunch
    option(value="dinner") Dinner
    option(value="snack") Snack
    4 changes: 4 additions & 0 deletions select.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    (($) ->
    $ ->
    $('select').wrap '<div class="select" />'
    ) jQuery