Programming/HTML, CSS

[iOS] button 요소에 color를 지정하지 않으면 safari 브라우저에서 버튼 텍스트가 파란색(-apple-system-blue)로 표시된다

리버김 2023. 3. 20. 14:35
만년 갤럭시 유저인 나(최근 산 아이패드 제외!)... 회사 서비스 404 페이지를 만들고 당당하게 담당자분께 보고했는데, 사파리에서만 버튼이 파란색으로 표시됨을 전달받았다. 알고 보니 사파리에서는 button 요소에 color가 지정되어 있지 않으면 기본으로 -apple-system-blue 색상을 할당한다고 한다. 따로 color를 지정해주면 쉽게 해결 된다!
 

How to avoid safari adding -apple-system-blue to my button

I'm loading a website through an iFrame in my ionic app. I realize that every button turned blue. I've searched a little bit and I found that safari was adding the following code. button { color: ...

stackoverflow.com

 


Safari는 macOS 및 iOS의 시스템 전체 디자인과 일관성을 유지하기 위해 버튼 요소에 -apple-system-blue 색상을 사용한다. -apple-system-blue는 "HIG(Human Interface Guidelines)"라고 하는 Apple 디자인 언어의 일부인 CSS 색상 키워드다.

반응형