모바일에서 textarea, input, a태그를 터치하면 회색 표시가 나온다?!(해결 : webkit-tap-highlight-color)

"이거 좀 없애주세요."

네이버 뉴스 textarea -webkit-tap-highlight-color

위의 주제와 무관한 댓글, 악플,.,.,.,.은 textarea 태그다.(출처 : 네이버뉴스) textarea뿐 아니라 input과 button, a 태그 등 기본적으로 모바일에서 터치를 했을 때 저렇게 하이라이트가 적용된다.

 

기본 기능으로 표시를 보여야하는데 반해 '앱'의 경우는 저 기본 기능이 거슬리는 경우가 많다. 웹앱 프로젝트를 진행하는데 앱에서 제공하는 위와 같은 아주 '간단한 기능'을 웹앱은 모바일웹이 바탕이 되기 때문에 귀찮아도 일일히 값을 설정을 해줘야한다.

 

구글에 해당 css를 검색해보면 아래와 같이 일치하는 결과가 나오지 않는다. 작성이 필요한 영역과 하이라이트가 굳이 필요없고 제거를 하고 싶다면 css 한줄을 추가해서 간단히 해결해보자.

구글에 검색해도 나오지 않는 -webkit-tap-highlight-color

 

"CSS 하나만 추가해주면 된다."

 

textarea{-webkit-tap-highlight-color: transparent;}