[HTML/CSS] input 커서 없애기

 

input 필드의 스타일링 방법에 대해 알아보고 있습니다.

[HTML/CSS] input 배경색, 글자색 변경하기

[HTML/CSS] input 커서 색상 변경하기 (caret-color)

 

이번에는 input 필드를 클릭하면 나타나는 커서를 없애는 방법입니다.

 

caret-color

caret-color 속성의 input 필드의 커서 색상을 지정하는 속성입니다.

이 속성의 값을 'transparent'로 지정하여,

input의 커서를 숨길 수 있습니다.

 

 

  예제  

<input type='text' 
       placeholder='caret'/>
<input type='text' 
       placeholder='no caret' 
       class='no-caret'/>

.no-caret {
  caret-color: transparent;
}

 

위 예제에서

첫번째 input에 필드를 클릭하면, 커서가 나타납니다.

두번째 input 필드를 클릭하면, 커서가 보이지 않습니다.