"클릭 시 파란색 배경"
웹 페이지에서 a 요소나 button 요소를 클릭하면 다음 이미지와 같이 파란색으로 하이라이트가 되는 것을 종종 확인할 수 있습니다.
저는 이 부분이 :active나 모바일 환경에서 :hover의 배경색인 줄 알고, 다음과 같이 적용했었습니다.
a:active,
a:hover,
a:link,
a:visited {
background-color: transparent
}하지만 아무리 해도 없어지지 않은 파란색...
결국에는 "클릭 시 파란색 배경"으로 구글링 하니 주르륵 제가 원하던 답이 나타났습니다.
-webkit-tap-highlight-color
-webkit-tap-highlight-color는 탭하는 동안 링크 위에 나타나는 하이라이트 색을 설정할 수 있는 CSS 속성입니다.
// Syntax
-webkit-tap-highlight-color: red;
-webkit-tap-highlight-color: transparent; /* for removing the highlight */
/* Global values */
-webkit-tap-highlight-color: inherit;
-webkit-tap-highlight-color: initial;
-webkit-tap-highlight-color: revert;
-webkit-tap-highlight-color: revert-layer;
-webkit-tap-highlight-color: unset;하이라이트 색을 제거하기 위해 a 요소와 button 요소에 다음과 같이 코드를 작성했습니다.
a,
button {
-webkit-tap-highlight-color: transparent;
}이 속성을 이용해서 하이라이트 색을 없애주니 조금 더 앱 같은 느낌이 납니다.
하지만 -webkit-tap-highlight-color: transparent; 는 안드로이드에서 지원되지 않는다고 합니다.
(iOS는 정상 동작합니다.)
따라서 안드로이드의 경우 다음과 같이 작성해야합니다.
a,
button {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
ontline: none;
}rgba 값 중 앞 255, 255, 255는 어느 값이든 상관없습니다.
가장 뒤에 있는 알파 값이 0이면 됩니다.
iOS에서 확인했을 때 transparent를 적용하든 rgba를 적용하든 모두 잘 동작합니다.
그래서 크로스 브라우징을 위해 rgba 값을 적용하는 것으로 마무리 했습니다!
참고
