[html, css] ::selection 마우스 드래그 배경색 변경

텍스트를 드래그하여 블럭을 씌울 때 스타일을 변경하기 위한, CSS의 pseudo-element 중 ::selection 선택자에 대해 알아보자.

 

사용

심플하다. 직접 드래그해보자.

See the Pen ::selection 연습 by d8040 (@d8040) on CodePen.

 

모질라 계열을 위해 ::-moz-selection 또한 사용하자.

속성

모든 속성을 사용해 스타일이 가능하진 않고, 아래의 속성들만 사용할 수 있다.

• color
• background-color
• cursor
• caret-color
• outline
• text-decoration 및 관련 속성
• text-emphasis-color
• text-shadow

주의

단순한 미적 이유로 selected 텍스트를 스타일할 때 웹 접근성을 고려해야 한다. 

시력이 나쁜 사람도 블럭을 씌웠다고 인식할 만큼의 명암비가 필요하다. 

 

(아마도) 좋지 않은 예.

브라우저 지원

IE는 8이하에서 작동하지 않는다.

모바일에선 iOS Safari와 Opera Mini에서 지원하지 않는다.