이 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-expand
IE10 + 의 경우 처럼 ). 해결책은 기본 화살표가 포함 된 드롭 다운 부분 을 숨기고 다른 브라우저에서 사용되는 SVG와 유사한 화살표 아이콘 글꼴 (또는 원하는 경우 SVG)을 삽입하는 것입니다 (자세한 내용은 select
CSS 규칙 참조). 사용 된 인라인 SVG에 대한 세부 사항).
첫 번째 단계는 브라우저를 인식 할 수있는 클래스를 설정하는 것입니다. 이것이 코드 시작시 조건부 IE IF를 사용한 이유입니다. 이 IF는 html
구식 IE 브라우저를 인식 하기 위해 특정 클래스를 태그에 첨부하는 데 사용됩니다 .
그 후 select
HTML의 모든 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
규칙 에서 간단하게 변경 하거나 직접 새 아이콘 글꼴 파일을 만들려고합니다.