[HTML/CSS] 마우스 드래그 배경색, 글자색 변경하기

마우스로 텍스트 영역을 드래그했을 때,

선택된 부분의 배경색과 글자색을 변경하는 방법입니다.

 

::selection

::selection은

사용자가 마우스로 드래그하거나 클릭하여 선택한 텍스트 영역에 스타일을 적용할 수 있는

pseudo-element(의사 요소)입니다.

::selection {
  color: red;
  background-color: yellow;
}

::selection 하위에는 다음의 속성을 정의할 수 있습니다.

• color
• background-color
• text-decoration
• text-shadow
• -webkit-text-stroke-color, -webkit-text-fill-color, -webkit-text-stroke-width

 

 

드래그 영역 글자색, 배경색 변경하기

 

<div class='drag-text'> 이 영역을 드래그 하면, 배경색은 보라색, 글자색은 노란색으로 바뀝니다.</div>

.drag-text::selection {
  color: yellow;
  background-color: purple;
}

drag-text 클래스 하위의 텍스트를 선택하면,

배경색은 보라색, 텍스트 색상은 노란색이 되도록 하였습니다.