Custom Select Wrapper

custom-select-wrapper.markdown

Custom Select Wrapper

A Pen by Matheus Sales on CodePen.

License.

index.slim

label for='styledSelect1' class='custom-select'
  select#styledSelect1 name='options'
    option value='' Select an option
    option value='1' Option 1
    option value='2' Option 2
    option value='3' Option 3
    option value='4' Option 4

style.sass

.custom-select
  position: relative
  display: block
  max-width: 400px
  min-width: 180px
  margin: 0 auto
  border: 1px solid #3C1C78
  background-color: #16013E
  z-index: 10
  
  select
    border: none
    outline: none
    background: transparent
    -webkit-appearance: none
    -moz-appearance: none
    appearance: none
    border-radius: 0
    margin: 0
    display: block
    width: 100%
    padding: 12px 55px 15px 15px
    font-size: 14px
    color: #714BB9
  
  &:after
    position: absolute
    right: 0
    top: 0
    width: 50px
    height: 100%
    line-height: 38px
    content: '\2228'
    text-align: center
    color: #714BB9
    font-size: 24px
    border-left: 1px solid #3C1C78
    z-index: -1
  
body
  margin-top: 80px
  background-color: #1A004A