label.select(for='slct')
  select#slct(required)
    option(value='', disabled selected) Select option
    option(value='#') One
    option(value='#') Two
    option(value='#') Three
    option(value='#') Four
    option(value='#') Five
    option(value='#') Six
    option(value='#') Seven
  svg
    use(xlink:href='#select-arrow-down')

// SVG Sprites
svg.sprites
  symbol#select-arrow-down(viewbox='0 0 10 6')
    polyline(points="1 1 5 5 9 1")
View Compiled
body
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  font-family: 'Roboto', sans-serif
  
*
  box-sizing: border-box

.select
  position: relative
  min-width: 200px
  
  svg
    position: absolute
    right: 12px
    top: calc(50% - 3px)
    width: 10px
    height: 6px
    stroke-width: 2px
    stroke: #9098A9
    fill: none
    stroke-linecap: round
    stroke-linejoin: round
    pointer-events: none
  
  select
    -webkit-appearance: none
    padding: 7px 40px 7px 12px
    width: 100%
    border: 1px solid #E8EAED
    border-radius: 5px
    background: white
    box-shadow: 0 1px 3px -2px #9098A9
    cursor: pointer
    font-family: inherit
    font-size: 16px
    transition: all 150ms ease
    &:required:invalid
      color: #5A667F
    
    option
      color: #223254
      &[value=""][disabled]
          display: none
    
    &:focus
      outline: none
      border-color: #0077FF
      box-shadow: 0 0 0 2px rgba(#0077FF,.2)

    &:hover + svg
      stroke: #0077FF

.sprites
  position: absolute
  width: 0
  height: 0
  pointer-events: none
  user-select: none
View Compiled
//NO JS

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.