CSS user-select: 블록 선택 가능 여부

제한 지원

일부 브라우저에서 사용할 수 없는 기능입니다.

CSS user-select 속성은 사용자가 요소의 텍스트를 선택할 수 있는지 제어합니다.

p {
  user-select: none;
  /* user-select: text; */
  /* user-select: all; */
}

p {
  font-size: 1.5em;
}

<p>선택해보세요</p>

불러오는 중...

구문

/* 키워드 값 */
user-select: none;
user-select: auto;
user-select: text;
user-select: all;

/* 전역 값 */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;

값

none

요소와 그 이하의 텍스트를 선택할 수 없습니다. Select 객체가 요소를 선택의 일부로서 포함할 수는 있습니다.

auto

auto의 사용 값은 다음 순서로 결정됩니다.

::before과 ::after 의사 요소에서는 none입니다.
부모 요소의 user-select 사용 값이 none이면 이 요소의 사용 값도 none입니다.
부모 요소의 user-select 사용 값이 all이면 이 요소의 사용 값도 all입니다.
다른 경우 text입니다.

text

텍스트를 선택할 수 있습니다.

all

요소의 텍스트를 모두 선택하거나 아무것도 선택하지 않습니다. 선택 범위가 요소의 일부를 포함하게 되면 하위 요소까지 모두 포함하게 범위가 확장됩니다. 콘텐츠 내에서 더블 클릭 또는 우클릭 시 all 값을 적용한 제일 높은 조상 요소의 텍스트가 모두 선택됩니다.

예제

<p>선택할 수 있는 텍스트입니다.</p>
<p class="unselectable">앗, 이건 선택할 수 없어요.</p>
<p class="all">한 번 클릭하면 이 텍스트가 모두 선택됩니다.</p>

.unselectable {
  -webkit-user-select: none;
  user-select: none;
}

.all {
  -webkit-user-select: all;
  user-select: all;
}

불러오는 중...

명세

CSS Basic User Interface Module Level 4

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`user-select`
`all`
`auto`
`none`
`text`