[CSS] css로 select 요소 꾸미기

이럴 때

select 상자가 간단해 보이기를 바랍니다. 아래와 같습니다.

코드

Pug

.wrap
  form(action="", method="post")
    .selectWrap
      select.select(name="select")
        option(value="1") item1
        option(value="2") item2
        option(value="3") item3
        option(value="4") item4

SCSS

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  background-color: #ddd;
}

.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;

  font-size: 30px;
  width: 104px;
}

.selectWrap {
  position: relative;
  &:after {
    content: '▼';
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666;
    pointer-events: none;
  }
}

해설

득점

기존 스타일 취소

.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;

    //略
}

의심 요소를 더하다

.selectWrap {
  position: relative;
  &:after {
    content: '▼';
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666;
    pointer-events: none;
  }
}

구현 예

참고 자료