웹킷(Safari)에서 광택 선택을 수정하는 방법

크로스 브라우저 호환성 문제: Safari에서 HTML <select> 요소 스타일링

다양한 브라우저 엔진에서 일관된 애플리케이션 동작을 유지하는 것은 어려울 수 있습니다. 최근 의도적으로 UI 프레임워크를 피하고 기본 HTML 요소에 크게 의존하는 프로젝트인 devpad를 개발하는 동안 Safari의 <select> 요소와 관련된 특이한 문제에 직면했습니다.

처음에는 Arc(Chromium 기반 브라우저)를 사용하여 원활하게 개발이 진행되었습니다. 그러나 Safari에서 테스트한 결과 예상치 못한 시각적 불일치가 발견되었습니다.

이 이미지는 Chromium과 Safari에서 렌더링된 <select> 요소 간의 놀라운 차이점을 보여줍니다.

Safari 렌더링은 Chromium의 깔끔한 모습과 달리 낡고 윤기나는 모습을 보여주었습니다. Stack Overflow와 ChatGPT에 대한 광범위한 연구 끝에 마침내 해결책을 찾았습니다.

일반적인 스택 오버플로 제안은 -webkit-appearance: none;을 사용하는 것입니다. 그러나 이로 인해 드롭다운 화살표 표시기가 제거되어 사용자 경험에 영향을 미칩니다.

나중에 언급되는 더 유망한 접근 방식은 SVG 배경 이미지를 사용하는 것입니다. 배경색을 적용할 때도 이 작업이 까다로웠습니다.

Lucide.dev 아이콘을 활용하여 SVG 화살표를 통합했습니다. 그러나 처음에는 CSS 변수를 통한 동적 색상 변경이 실패했습니다. @media 요소 내의 select 쿼리도 효과적이지 않은 것으로 나타났습니다.

<code class="language-css">select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('data:image/svg+xml;utf8,<svg fill="none" height="24" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 9 12 15 18 9"></path></svg>') no-repeat;
  /* ...rest of the CSS... */
}</code>

ChatGPT 덕분에 솔루션은 SVG 문자열을 URL 인코딩하는 것과 관련되었습니다.

<code class="language-css">select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%209%2012%2015%2018%209%22/%3E%3C/svg%3E') no-repeat;
  background-size: 18px;
  background-position: calc(100% - 3px) 50%;
  background-repeat: no-repeat;
  background-color: var(--input-background);
  padding-right: 24px;
}

@media (prefers-color-scheme: dark) {
  select {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%209%2012%2015%2018%209%22/%3E%3C/svg%3E') !important;
  }
}</code>

최종 결과: 일관되고 브라우저 간 호환 가능한 <select> 요소와 어두운/밝은 모드 지원

이 솔루션을 사용하면 브라우저 간 스타일링 문제를 해결하는 데 있어 다른 사람들의 시간과 노력을 절약할 수 있습니다. devpad 프로젝트에 대한 자세한 내용은 제 최신 블로그 포스팅을 참고해주세요.

위 내용은 웹킷(Safari)에서 광택 선택을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!