텍스트 선택 강조 표시를 비활성화하는 방법

질문 : 텍스트 선택 강조 표시를 비활성화하는 방법

---

버튼 (예 : Stack Overflow 페이지 상단에있는 Questions , Tags , Users 등) 또는 탭처럼 작동하는 앵커의 경우 사용자가 실수로 텍스트를 선택한 경우 강조 표시 효과를 비활성화하는 CSS 표준 방법이 있습니까? ?

이 작업은 JavaScript로 수행 할 수 있으며 약간의 인터넷 검색으로 Mozilla 전용 -moz-user-select 옵션이 생성되었습니다.

CSS로이를 수행 할 수있는 표준 준수 방법이 있습니까? 그렇지 않은 경우 "모범 사례"접근 방식은 무엇입니까?

답변

---

2017 년 1 월 업데이트 :

Can I use 에 따르면 현재 Internet Explorer 9 및 이전 버전을 제외한 모든 브라우저에서 user-select 가 지원됩니다 (하지만 슬프게도 여전히 공급 업체 접두사가 필요합니다).

다음은 사용 가능한 올바른 CSS 변형입니다.

 

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

user-select 는 표준화 프로세스에 있습니다 (현재 W3C 작업 초안 ). 모든 곳에서 작동하는 것은 보장되지 않으며 브라우저마다 구현에 차이가있을 수 있습니다. 또한 브라우저는 향후 지원을 중단 할 수 있습니다.

더 많은 정보는 Mozilla 개발자 네트워크 문서 에서 찾을 수 있습니다.

출처 : https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting