텍스트에 하늘색 영역 생길 때 없애는 속성

react로 진행되는 프로젝트에 수정사항으로

FAQ 부분에 보이는 하늘색 부분

 

모바일에서 텍스트를 꾸욱 오랫동안 누르면 하이라이트가 생겼다.

pc에서 더블클릭하는 개념이다.

처음엔 포커스로 처리하면 되나 했지만 찾아보니 이 문제를 해결해줄 수 있는 속성이 따로 있었다.

 

-webkit-tap-highlight-color  이라는 속성인데 보통 투명한것을 원하기 때문에 아래와 같이 써주면 된다.

.content {-webkit-tap-highlight-color: transparent;}

// 안드로이드는
.content {-webkit-tap-highlight-color: rgba(0,0,0,0);}

 

*** 대신 안드로이드는

-webkit-tap-highlight-color: rgba(0,0,0,0); 로 처리해줘야 먹힌다.

나는 그래서 그냥 둘 다 넣어두었다.

 

그리고 아예 텍스트 선택을 막는 속성은

user-select: none; 으로 처리해주면 선택을 아예 막을 수 있다.

.content {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

 

 

참고자료 : 

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select