[html/css] ie에서 select box 화살표 스타일 바꾸기

 

chrome, firefox, edge, ie에서 동일하게 select box 화살표 스타일 바꾸기

 

html

select 태그 상위로 클래스 2개 더 만들기

                <div class="select-group">
                    <div class="select-wrap">
                        <select class="select_box">
                            <option>선택</option>
                            <option>옵션1</option>
                            <option>옵션2</option>
                            <option>옵션3</option>
                            <option>옵션4</option>
                            <option>옵션5</option>
                        </select>
                    </div>
                </div>

 

css

1. select 디폴트 css 초기화시키기

  select {
    width:100%;
    height:100%;
   padding:0 28px 0 10px;
   font-size: 15px;
    border:0;
    -webkit-appearance:none; /* for chrome */
    -moz-appearance:none; /*for firefox*/
    appearance:none;
    box-sizing: border-box;
    background:transparent!important;
 }
 
 select::-ms-expand{
    display:none;/*for IE10,11*/
 }

2. 화살표 이미지 입혀주기

.select-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.select-wrap {
    height: 28px;
    cursor: pointer;
   background:url('../img/input_arrow.png') no-repeat 93% 90%/12px auto;
 }
 .select_box{
    display: block;
    width: 300px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}

 

화살표 이미지(png) 파일은 첨부파일 참고