CSS select 맞춤형 2017~ 스펀지 케이크도~

이렇게 자주 나타나는 김에 필기도 좀 해 주세요.

브라우저 지원

IE10～

진흙 기준 미확인

크롬/firefox 최신

코드

html

<div class="selectWrap">
    <select name="" id="">
        <option value="">001</option>
        <option value="">002</option>
        <option value="">003</option>
    </select>
</div>

css

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    height: 30px;
    background: transparent;
    position: relative;
    z-index: 1;
    padding: 0 40px 0 10px;
    border: 1px solid #ccc;
}
select::-ms-expand {
    display: none;
}
.selectWrap{
    position: relative;
    display: inline-block;
}
.selectWrap::before{
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    background: #ccc;
    height: 100%;
    width: 30px;
}
.selectWrap::after{
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 9px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #fff transparent transparent transparent; 
}

대략적인 해설

css

select{
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
}
select::-ms-expand {
                display: none;
}

를 참고하십시오.
이전에는 Firefox가 대응하기 어려웠지만, 현재의 최신 버전은 문제없다.
숨겨진 삼각형 대신:after 또는:before로 설계된 삼각형을 삽입하고 싶지만,select는:before/:after를 통과하지 않습니다.
대체 수단으로 select를 포장합니다.selectWrap에서: before를 삽입합니다.
삽입된 요소는 select에만 중첩되어 있어 클릭 판정이 없습니다.
대응으로 select도position:relative에서 z-idex를 조정하여 select가 다시 앞에 나타나도록 합니다.
기본적으로 select에 백그라운드를 넣었기 때문에 삼각형이 보이지 않기 때문에 백그라운드에서 배경색이 투명해지면 화살표를 볼 수 있습니다.
border 같은 거 좋아해요.
중첩된 삼각형에 텍스트를 겹치지 않도록 select의padding을 조정합니다.
이상이면 됩니다.
SP 환경에서pointer-events는 통과할 수 없기 때문에 배경이 투명해진 후 뒷면에 설정된 역작을 사용하지만 컴퓨터만 있다면 selectWrap::after와selectWrap::before pointer-events:none;설정을 통해 노동력을 줄일 수 있다.