디케이
[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에서 지원하지 않는다.
반응형
'HTML, CSS' 카테고리의 다른 글
[html,jQuery] 클릭 시 해당 엘리먼트로 스크롤 이동 (2) | 2021.02.14 |
---|---|
[JSP] <form> 태그 method 속성 (0) | 2021.02.09 |
CSS로 글자 자르기 - 한 줄, 여러 줄 (0) | 2020.12.23 |
CSS: 스크롤 화살표 예제 (0) | 2020.12.20 |
스크롤 화살표, 회전 배너효과 (0) | 2020.12.20 |