[css] CSS - caret-color 속성 - '입력/편집' 가능 요소의 커서 색상 변경 (= caret-color속성 = 카렛컬러속성) ※ 커서색깔/커서색상

1. caret-color 예제 - 입력/편집 가능 요소의 커서 색상 변경
2. caret-color 정의
3. caret-color 구문

caret-color 예제 - 입력/편집 가능 요소의 커서 색상 변경

 

<style>

.hz {

  caret-color: red;

}

</style>

<input class="hz" value="홈짱닷컴 Homzzang.com"><br><br>

<textarea class="hz">홈짱닷컴 Homzzang.com</textarea>

<p contenteditable class="hz">홈짱닷컴 Homzzang.com</p>

 

결과보기

caret-color 정의

 

'입력/편집' 가능 요소의 커서 색상 지정.

 

---

 

1. 입력/편집 가능 요소 예

• <input>
• <textarea>...</textarea>
• <p contenteditable>...</p>

 

2.

cursor 속성 - 마우스커서 모양 지정.

 

3.

• 기본값: auto
• 상속여부: O
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.caretColor="red";

 

4.

IE 제외한 주요 최신 브라우저 모두 지원.

 

5. MDN caret-color 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

 

caret-color 구문

 

selector {caret-color: auto|color|transparent|initial|inherit;}

 

---

[속성값]

 

auto

브라우저 자동 지정. (기본값)

 

color

색상코드 지정. (예) red / #5729e9 / rgb(0 200 0) / hsl(228deg 4% 24% / 0.8);

 

transparent

투명

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.