사용자 선택 속성에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

사용자 선택 속성에 대한 자세한 설명

藏色散人

Mar 01, 2021 pm 12:01 PM

user-select

사용자 선택 속성은 CSS3 사양의 새로운 기능으로, 사용자가 텍스트를 선택할 수 있는지 여부를 설정하거나 검색하는 데 사용됩니다. 사용 구문은 "user-select:none | text | all | element"입니다. 기본값은 텍스트이며 대체된 요소를 제외한 모든 요소에서 작동합니다.

사용자 선택 속성에 대한 자세한 설명

이 문서의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

user-select, 사용자가 텍스트를 선택할 수 있는지 여부를 설정하거나 검색합니다.

user-select 구문:

user-select：none |text| all | element

로그인 후 복사

기본값: text

적용 대상: 대체 요소를 제외한 모든 요소

상속: 없음

애니메이션: No

계산값: 지정값

값:

none: 텍스트 선택 불가

text: 텍스트 선택 가능

all: 전체 내용을 볼 때 모든 콘텐츠를 선택할 수 있습니다. 하위 요소를 두 번 클릭하거나 상황에 따라 클릭하면 선택한 부분은 해당 하위 요소에서 역추적되는 가장 높은 상위 요소가 됩니다.

element: 텍스트를 선택할 수 있지만 선택 범위는 요소 경계에 의해 제한됩니다.

Description:

사용자가 텍스트를 선택할 수 있는지 여부를 설정하거나 검색합니다.

IE6-9는 이 속성을 지원하지 않지만 user-select:none의 효과를 얻기 위해 레이블 속성 사용을 지원합니다.

여전히 지원됩니다. Opera 12.5까지는 사용할 수 없습니다. 이 속성은 지원되지만 IE6-9와 마찬가지로 user-select:none의 효과를 달성하기 위해 개인 레이블 속성 unselectable="on" 사용도 지원합니다. unselectable의 다른 값은 off입니다.

Chrome 및 Safari 외에도 다른 브라우저에서 텍스트가 -ms-user-select:none;으로 설정된 경우 사용자는 해당 텍스트 블록 내에서 텍스트 선택을 시작할 수 없습니다. 그러나 사용자가 페이지의 다른 영역에서 텍스트를 선택하기 시작하면 텍스트를 -ms-user-select:none으로 설정하여 해당 영역 텍스트를 계속 선택할 수 있습니다.

해당 스크립트 기능은 userSelect입니다. .

【추천 학습: CSS 비디오 튜토리얼】

호환성:

밝은 녹색 = 지원

빨간색 = 지원되지 않음

핑크 = 부분적으로 지원됨

사용자 선택 속성에 대한 자세한 설명

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>
.test{
padding:10px;
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
background:#eee;}
</style>
</head>
<body>
<div onselectstart="return false;" unselectable="on">选择我试试，你会发现怎么也选择不到我，哈哈哈哈</div>
</body>
</html>

로그인 후 복사

렌더링:

사용자 선택 속성에 대한 자세한 설명