그누보드 QA - IE8, IE9 Select Box 초기화 도와주세요

IE8, IE9 Select Box 초기화 도와주세요

o3ohhh 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2020.11.19 11:53:51 3264 (222.♡.♡.73)

본문

3731885385_1605754325.6425.png


select::-ms-expand {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5-7 */
    filter: alpha(opacity=0);
    /* Good browsers :) */
    opacity:0;
    display:none;
}
select {margin:0;border:1px solid #ccc;background:url(../img/select.png) no-repeat 98% center;background-size:14px auto;outline:0;cursor:pointer;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
select.select_placeholder {color:#ccc}
select.select_placeholder:required:invalid,
select.select_placeholder option:first-of-type {color:#555}
select.select_placeholder option:not(:first-of-type) {color:#555}

IE8, IE9 에서는 셀렉트박스 대체 어떻게 초기화 시키나요??
구글링을 아무리해봐도 이것밖에 select::-ms-expand {display:none;} 답변이 없네요....

#css3 #select #초기화

답변 8

sad4u 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2020-11-19 13:53:06 106.♡.♡.150

윗분들 말씀대로 곧 ie 지원이 곧 끊기는 마당이라 구 브라우저를 대응하기 쉽지 않을겁니다
아래소스는 숨김처리인데 완벽하게 감추는 것은 어렵고 그렇게 보이게끔 CSS로 처리할 수 밖에 없을 것 같네요.

<style>
    .styled-select select
    {
        border: 0 !important;  /*Removes border*/
        -moz-appearance: none;  /*Removes default style Firefox*/
        background: url('select_icon.png')  no-repeat;
        background-position: 179px 7px;
        text-indent: 0.01px;
        text-overflow: "";
        color: #FCAF17;
        width:200px;
    }

    .styled-select {
        width: 200px;
        height: 25px;
        border: 1px solid #FCAF17;
    }

    div select {
        z-index:1;
    }

    div:before {
        display: block;
        position: absolute;
        content: '';
        left: 188px;
        top: 8px;
        height: 18px;
        width: 19px;
        margin: 2px;
        background: white;
        z-index: 5;
    }
</style>
<div class="editor-field styled-select" style="width:200px;">
    <div>
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
</div>