IE에서 선택 화살표 제거 에서는 작동하지 않습니다 . .styled-select select {

요소를 선택하고 화살표를 제거한 다음 다른 아이콘을 추가 할 수 있습니다. Firefox Safari 및 Chrome 에서이 작업을 수행 할 수 있지만 IE9 에서는 작동하지 않습니다 .

.styled-select select
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -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;
 }

IE9에서 바이올린 을 참조하십시오 . 내가 필요한 것은 ie9 Please JSFIDDLE answer에서 화살표를 제거하는 것입니다.

답변

IE9에서는 @Spudley의 조언에 따라 순수한 핵 으로 가능합니다 . div의 높이와 너비를 사용자 정의하고 선택했기 때문에 div:beforeCSS를 변경해야 합니다.

IE10 인 경우 css3 이하를 사용하는 것이 가능합니다

select::-ms-expand {
    display: none;
}

그러나 jQuery 플러그인에 관심이 있다면 Chosen.jsjs에서 직접 만들 수도 있습니다.

답변

이 GitHub 리포지토리에서 찾을 수있는 솔루션을 제안 합니다.
이는 아이콘 글꼴에서 제공되는 사용자 정의 화살표가있는 IE8 및 IE9에서도 작동 합니다.

사용자 정의 크로스 브라우저 드롭 다운의 예 : 모든 브라우저에서 크로스 브라우저 기능을 확인하십시오.

어쨌든 최신 브라우저부터 시작 해보면 이전 브라우저에 대한 솔루션을 보게 될 것입니다.

Chrome, Firefox, Opera, Internet Explorer 10 이상을위한 드롭 다운 화살표

이러한 브라우저의 경우 동일한 화살표를 갖기 위해 드롭 다운 에 동일한 배경 이미지 를 설정하는 것이 쉽습니다 .

이렇게하려면 select태그 의 브라우저 기본 스타일을 재설정하고 이전에 제안한대로 새로운 배경 규칙을 설정해야합니다.

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

appearance규칙은 각 화살표의 동일한 측면을 갖고 싶어, 당신은 장소에 보관해야, 브라우저의 기본 사람을 다시 없음으로 설정되어 있습니다.

background예제 의 규칙은 다른 화살표를 나타내는 SVG 인라인 이미지로 설정됩니다. 왼쪽에서 98 % 위치하여 오른쪽 여백에 약간의 여백을 유지합니다 (원하는대로 쉽게 위치를 수정할 수 있음).

올바른 크로스 브라우저 동작을 유지하기 위해 유지해야 할 유일한 다른 규칙은 outline입니다. 이 규칙은 요소를 클릭 할 때 (일부 브라우저에서) 나타나는 기본 테두리를 재설정합니다. 필요한 경우 다른 모든 규칙을 쉽게 수정할 수 있습니다.

아이콘 글꼴을 사용하는 Internet Explorer 8 (IE8) 및 Internet Explorer 9 (IE9)의 드롭 다운 화살표

이것은 어려운 부분입니다 … 아니면 아닐 수도 있습니다.

이러한 브라우저의 기본 화살표를 숨기는 표준 규칙은 없습니다 ( select::-ms-expandIE10 + 의 경우 처럼 ). 해결책은 기본 화살표가 포함 된 드롭 다운 부분 을 숨기고 다른 브라우저에서 사용되는 SVG와 유사한 화살표 아이콘 글꼴 (또는 원하는 경우 SVG)을 삽입하는 것입니다 (자세한 내용은 selectCSS 규칙 참조). 사용 된 인라인 SVG에 대한 세부 사항).

첫 번째 단계는 브라우저를 인식 할 수있는 클래스를 설정하는 것입니다. 이것이 코드 시작시 조건부 IE IF를 사용한 이유입니다. 이 IF는 html구식 IE 브라우저를 인식 하기 위해 특정 클래스를 태그에 첨부하는 데 사용됩니다 .

그 후 selectHTML의 모든 div요소 는 (또는 요소를 래핑 할 수있는 모든 태그)로 감싸 야합니다. 이 랩퍼에서 아이콘 글꼴이 포함 된 클래스를 추가하십시오.

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

간단히 말해이 래퍼는 select태그 를 시뮬레이션하는 데 사용됩니다 .

드롭 다운처럼 작동하려면 래퍼에 테두리가 있어야합니다 select.

select기본 화살표를 래퍼보다 25 % 길게 숨겨야하므로 테두리를 사용할 수 없습니다 . 결과적으로 overflow: hidden규칙 select자체에 의해 25 % 더 숨겨지기 때문에 오른쪽 경계가 보이지 않아야 합니다.

사용자 정의 화살표 아이콘 글꼴은 :before규칙 content에 화살표에 대한 참조가 포함 된 의사 클래스에 배치됩니다 (이 경우 오른쪽 괄호).

또한이 화살표는 가능한 한 중앙에 위치하도록 절대 위치에 배치합니다 (다른 아이콘 글꼴을 사용하는 경우 상단 및 왼쪽 값과 글꼴 크기를 변경하여 적절하게 조정해야 함).

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

배경 화살표 또는 아이콘 글꼴 화살표를 쉽게 작성하고 대체 할 수 있습니다. background-image규칙 에서 간단하게 변경 하거나 직접 새 아이콘 글꼴 파일을 만들려고합니다.

답변

클래스와 의사 클래스를 사용하려는 경우 :

.simple-control 당신의 CSS 클래스입니까

:disabled 의사 클래스입니다

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

답변