브라우저 간 호환성을 위해 선택 요소 화살표를 어떻게 사용자 정의할 수 있습니까?

브라우저 간 호환성을 위해 선택 화살표 모양 사용자 정의

선택 요소의 미적 측면을 향상시키기 위한 노력의 일환으로 사용자 정의 이미지가 있는 기본 화살표. 그러나 이러한 브라우저 간 호환성을 달성하는 것은 어려울 수 있습니다.

이 문제를 해결하려면 CSS에 다음 코드를 통합하는 것을 고려하십시오.

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

이 추가는 기본 화살표 모양을 억제합니다. 모든 주요 브라우저.

안타깝게도 Firefox는 버전 35까지 이 기능을 완전히 지원하지 않습니다. 이전 버전의 경우 해결 방법이 필요합니다. jsfiddle 예제에서 시연된 이러한 접근 방식 중 하나는 원래 화살표를 숨기고 선택 요소 위에 마우스를 올렸을 때 화살표의 기능을 모방하는 배경 이미지로 바꾸는 것입니다.

위 내용은 브라우저 간 호환성을 위해 선택 요소 화살표를 어떻게 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!