WebKit에서 ::after를 사용하여 선택 상자의 스타일을 어떻게 지정할 수 있나요?-CSS 튜토리얼-php.cn

How Can I Style a Select Box with ::after in WebKit?

세련된 WebKit의 요소는 독특한 과제를 제시합니다. 개발자는 ::after와 같은 CSS 의사 요소를 사용하여 모양을 향상시키려고 시도하는 경우가 많습니다. 그러나 특정 시나리오에서는 문제 발생이 불가피해집니다. 이 난제를 강조하는 특정 쿼리를 살펴보겠습니다.

쿼리: 이미지에 의존하지 않고 두 개의 서로 다른 부분으로 구성된 상자입니다. HTML은 간단합니다.

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

로그인 후 복사

이제 몇 가지 CSS를 소개하겠습니다.

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;
}

로그인 후 복사

안타깝게도 스타일이 예상대로 렌더링되지 않습니다. 실패에 당황한 개발자는 W3C 사양에서 지침을 구하지만 빈손으로 나옵니다.

답: 잠재적인 한계

관찰에 따르면 ::after를 추가하는 것 같습니다. 스타일 <선택> 요소는 현재 WebKit에서 지원되지 않습니다. 이러한 제한은 운영 체제가 브라우저 제어를 우회하여 이러한 요소를 생성하는 방식으로 인해 발생할 수 있습니다.

결론적으로