> 웹 프론트엔드 > CSS 튜토리얼 > 텍스트가 선택되지 않도록 CSS를 설정하는 방법

텍스트가 선택되지 않도록 CSS를 설정하는 방법

王林
풀어 주다: 2020-11-16 13:42:56
원래의
2249명이 탐색했습니다.

CSS에서 선택할 수 없는 텍스트를 설정하는 방법: [user-select:none]과 같이 user-select 속성을 사용하여 설정할 수 있습니다. user-select 속성은 CSS3의 새로운 속성이며 콘텐츠의 선택성을 제어하는 ​​데 사용됩니다.

텍스트가 선택되지 않도록 CSS를 설정하는 방법

속성 소개:

user-select는 콘텐츠의 선택성을 제어하는 ​​데 사용되는 CSS3 UI 사양의 새로운 기능입니다.

(학습 동영상 공유: css 동영상 튜토리얼)

코드 구현:

/*设置文字不能被选中     以下为css样式*/
-webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
로그인 후 복사

속성 값:

  • auto - 기본값, 사용자는 요소에서 콘텐츠를 선택할 수 있습니다.

  • none - 사용자

  • 요소 내에서는 아무것도 선택할 수 없습니다. 텍스트 - 사용자는

  • 요소 내에서 텍스트를 선택할 수 있습니다. 요소 - 텍스트는 선택할 수 있지만 요소 경계 내에서만 선택할 수 있습니다(IE 및 FF에서만 지원됨). all - 편집하는 동안 컨테이너에서 하위 요소에 대해 두 번 클릭/컨텍스트 클릭이 발생하면 해당 요소의 최상위 상위 요소가 선택됩니다.

  • -moz-none - Firefox 전용, 입력 상자의 텍스트를 제외하고 요소 및 하위 요소의 텍스트를 선택할 수 없습니다(IE 브라우저에서는 onselectstart="javascript:return false를 통해 수행됨). ;" 이벤트 기능)

관련 권장 사항: CSS 튜토리얼

위 내용은 텍스트가 선택되지 않도록 CSS를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿