[CSS] Select 박스 화살표 없애기, 커스텀하기

Select 박스 화살표 없애기

 

🩸이슈 발생

select 박스 기본 화살표 없애고 커스텀해보자.

 

728x90

 

---

🩹이슈 해결

1.Html

<select id="SI_BRANCH_SEQ" style="padding: 8px;" class="select_renewal input-text">
    <option value="">선택해주세요.</option>
    <option value="1">옵션1</option>
</select>

 

2. CSS

select {
    -webkit-appearance: none;  /* 크롬 화살표 없애기 */
    -moz-appearance: none; /* 파이어폭스 화살표 없애기 */
    appearance: none;  /* 화살표 없애기 */
    display: inline-block;
    border: 1px solid #dbdbdb;
    width: 100%;
}
	
.select_renewal{
    background: url(/img/landing/ic-arrow-down-grey-24px.png) no-repeat 95% 50%;
    border-radius: 6px;
}

.input-text {
    color: #767676;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}

① 기존에 있는 화살표를 없애기 위해 세 가지 속성을 추가했다.

-webkit-appearance : none; (크롬)
-moz-appearance: none; (파이어폭스)
appearance: none;

 

② 새로운 화살표를 추가하기 위해 background로 화살표 이미지를 넣었다.