브라우저 간 호환성을 유지하면서 CSS로 요소의 스타일을 지정하려면 어떻게 해야 합니까?

스타일<옵션> CSS를 사용한 요소: 브라우저 간 호환성

CSS만 사용하는 요소는 브라우저 간 호환성 문제로 인해 어려울 수 있습니다. 그러나 원하는 결과를 얻기 위해 사용할 수 있는 몇 가지 기술이 있습니다.

WebKit 및 Firefox(모양 속성)

Firefox 35부터는 WebKit과 Firefox 브라우저 모두 모양 속성을 사용하여

의 기본 스타일을 제거할 수 있습니다. 요소. 모양 속성을 없음으로 설정하면 드롭다운 버튼을 숨기고 옵션에 대한 사용자 정의 스타일을 만들 수 있습니다.

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

IE 11(::-ms-expand)

IE 11 호환성을 위해 ::-ms-expand 의사 요소를 사용하여 기본 드롭다운을 숨길 수 있습니다 버튼을 누르세요.

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

기존 솔루션(JavaScript 사용)

appearance 속성이 도입되기 전에는 순수 CSS를 사용하는 요소. 해결 방법으로 JavaScript 라이브러리를 사용하여 의 모양을 모방한 사용자 정의 드롭다운 메뉴를 만들 수 있습니다.

이러한 JavaScript 라이브러리 중 하나는 선택 메뉴 플러그인을 제공하는 jQuery입니다.

$("select").selectmenu();

이 플러그인을 사용하면 CSS를 사용하여 스타일을 지정할 수 있는 사용자 정의 드롭다운을 만들 수 있습니다.

참고:

JavaScript를 사용하여 스타일을 지정하는 것이 중요합니다. <옵션> 요소는 화면 판독기나 기타 보조 기술을 사용하는 사용자의 접근성에 영향을 미칠 수 있습니다. 따라서 가능하면 외관 속성을 사용하는 것이 좋습니다.

위 내용은 브라우저 간 호환성을 유지하면서 CSS로 요소의 스타일을 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!