내 CSS 의사 요소 스타일이 선택 상자에서 작동하지 않는 이유는 무엇입니까?

CSS를 사용하여 선택 요소 스타일 지정: 의사 요소를 사용하여 선택 상자의 특성

WebKit에서 의사 요소를 사용하여 선택 상자의 스타일을 지정하려고 할 때 Safari, Chrome 등의 브라우저에서는 예상치 못한 동작이 발생할 수 있습니다. 다음 코드가 원하는 효과를 얻지 못하는 이유가 궁금할 수 있습니다.

<select name="selector">
  <option value="">Test</option>
</select>

select {
  -webkit-appearance: none;
  background: black;
  border: none;
  border-radius: 0;
  color: white;
}

select::after {
  content: " ";
  display: inline-block;
  width: 24px; height: 24px;
  background: blue;
}

이 문제는 선택 요소 렌더링에 OS가 관여하기 때문에 발생합니다. HTML 요소임에도 불구하고 선택 상자는 일반적으로 운영 체제에 의해 렌더링되므로 사용자 정의 스타일 지정 노력을 방해할 수 있습니다. 이 제한은 WebKit 기반 브라우저와 기타 OS 종속 렌더링 엔진 모두에 영향을 미칩니다.

결과적으로 위 예의 :after 선택기와 같은 의사 요소를 사용하여 선택 요소의 스타일을 지정하지 못할 수 있습니다. 의도한 효과가 나타나거나 서로 다른 시스템에서 일관되지 않게 작동할 수 있습니다.

위 내용은 내 CSS 의사 요소 스타일이 선택 상자에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!