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

질문

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

자바 스크립트로이 작업을 수행 할 수 있으며 약간의 인터넷 검색으로 Mozilla 전용 -moz-user-select옵션이 생성되었습니다.

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

답변

2017 년 1 월 업데이트 :

Can I use에 따르면, user-select는 현재 인터넷 익스플로러 9와 그 이전 버전을 제외한 버전에서 지원됩니다.

---

다음은 사용 가능한 올바른 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