IE8, IE9 Select Box 초기화 도와주세요
본문
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;} 답변이 없네요....
답변 8
윗분들 말씀대로 곧 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>
구버전 ie 대응이 꼭 필요하신건가요?
이제 놓아주세요
아니 대체 언제적 브라우저를 ??
그냥 다른 회사로 옮기세요. 거기 있으면 본인은 곧 퇴물됩니다.
아... 구버전 ie 대응이 그냥 궁금해서 ㅎㅎ 여쭈어본건데..!
답변을 작성하시기 전에 로그인 해주세요.
