[CSS] 텍스트 드래그 했을 때 색상 변경하기

텍스트 드래그 했을 때 색상 변경하기 

글씨를 드래그 하면 보통 아래와 같이 파란색 드래그 박스가 생성됩니다.
하지만 어떤 웹사이트의 경우 파란색이 아니라 다른 색으로 보이기도 합니다.

 

1. 드래그 박스 색상 변경하기

아래 코드를 통해 텍스트를 드래그 했을 때 표시되는 색상을 변경할 수 있습니다.

::selection {
    background-color: #6bacce; //드래그 박스 색상
    color: white; //글씨 색상
}

 

2. 글씨 색만 변경하기

드래그박스를 없애고 글씨 색만 변경할 수도 있습니다.

h2::selection {
    background-color: white; //배경을 하얗게 만들어줍니다.
    color: #6bacce;
}

::selection {
	background-color: #6bacce;
	color: white;
}

 

3. 요소마다 다른 색상 적용하기

조금 더 응용하면 요소마다 다른 색상을 띄도록 설정할 수도 있습니다.

//아래 코드는 h2 태그에만 해당됩니다.
h2::selection {
    background-color: #a7a7a7; //회색
    color: black; //글씨 색상
}

::selection {
    background-color: #6bacce; //하늘색
    color: white; //글씨 색상
}

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂