iOS 터치 하이라이트

iOS는 링크, form영역에 터치(텝)을 하면 하이라이트 영역이라고 회색 영역이 생긴다.
드레그나 누르고 있을때도 생긴다. 

왠만한 영역들에는 모두 생기는데 안 생기는 영역도 있는 것 같다.
정확한 가이드는 나도 모르겠다. 하지만 이걸 제거해야 할 일이 생겼다.

stackoverflow에서 검색을 해보니 외국은 접근성이다 더 이쁜색으로 꾸밀거다....이러고 있는데 우리는 삭제를 해야한다... 방법은 간단하다. 아마 검색을 통해서도 많이 아래 코드를 봤을 것이다.

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;/*Android*/ 


그런데 이 코드를 부모 태그에 적용을 하면
하위에 있는 선택요소(링크, button, etc...) 또한 하이라이트가 사라지게 되니
개별적으로 초기화를 해줘야 하는데

선택자{-webkit-tap-highlight-color:rgba(0, 0, 0, 0.3);}

그냥 색상값에 투명도를 주면 된다...그런데 이건 iOS만 적용 된다. 
아래 안드로이드를 추가하자...

선택자:active{background-color:rgba(0, 0, 0, 0.3);}/* Android */ 

가급적이면 이런 작업은 하지말자... 접근성에도 안좋고....의미도 없고....

댓글

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

[html] 모바일웹 작업 팁 정리중...

Swiper lazyLoading