텍스트 입력 캐럿 스타일링


118

집중된 캐럿의 스타일을 지정하고 싶습니다 <input type='text'/>. 특히 색상과 두께입니다.


1
글쎄, 이것은 내 <input type="text"/>추측이다
Benjamin Crouzier 2011-09-07

그는 질문 및 태그 편집, 스타일 caret를 찾고
벤자민 Udink 열 케이트

수락 된 답변을 변경해보십시오. 최신 CSS 변경 사항을 감안할 때 Michael Jasper의 업데이트 된 답변은 훨씬 우수합니다. stackoverflow.com/a/7339406/1889273
Boaz

답변:


74

웹킷 브라우저를 사용하는 경우 다음 CSS 스 니펫을 따라 캐럿의 색상을 변경할 수 있습니다. CSS로 형식을 변경할 수 있는지 잘 모르겠습니다.

input,
textarea {
    font-size: 24px;
    padding: 10px;

    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ccc;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

예 : http://jsfiddle.net/8k1k0awb/


3
영리한 해킹,하지만 그들은 단지 그림자 😭에 의해 채워됨에 따라 이모티콘이 작동하지 않습니다
simbolo

흠, 제 경우에는 (데스크톱 Chrome 및 FF) 효과를 위해 음영이 필요하지 않습니다. 텍스트 채우기 색상을 편집 한 다음 입력하면됩니다.
Velda

86

'Caret'은 당신이 찾고있는 단어입니다. 나는 그것이 CSS의 이해가 아니라 브라우저 디자인의 일부라고 믿습니다.

그러나 여기에 자바 스크립트와 CSS를 사용하여 캐럿 변경시뮬레이션 하는 것에 대한 흥미로운 글이 있습니다. http://www.dynamicdrive.com/forums/showthread.php?t=17450 그것은 나에게는 약간 엉망인 것 같지만 아마도 유일한 방법 일 것입니다. 임무를 완수하십시오. 기사의 요점은 다음과 같습니다.

화면 어딘가에 일반 텍스트 영역이 표시되어 사용자가 "가짜 터미널"을 클릭하면 텍스트 영역에 집중하고 사용자가 입력을 시작하면 입력 된 데이터를 텍스트 영역에 추가합니다. 우리 "터미널"에 그리고 그게 다입니다.

여기 에 데모가 있습니다.


2018 업데이트

새로운 CSS 속성caret-color 의 캐럿에 적용 input또는 contenteditable지역. 지지대가 증가하고 있지만 100 %는 아닙니다. 이것은 색상에만 영향을 미치며 너비 나 다른 유형의 모양에는 영향을주지 않습니다.

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>


38

: CSS3에서, 지금은 기존의 답변에 제안 된 해킹의없이,이 작업을 수행하는 기본 방법이 재산 .caret-color

아래에서 볼 수 있듯이 캐럿으로 할 수있는 일이 많이 있습니다. 애니메이션가능 합니다.

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

caret-color속성은 Firefox 55 및 Chrome 60에서 지원됩니다. Safari Technical Preview 및 Opera에서도 지원됩니다 (아직 Edge에서는 지원되지 않음). 여기 에서 현재 지원 테이블을 볼 수 있습니다 .


1
날 펀치로 이길. 물론이 속성은 적어도 지금은 Firefox에서만 작동하며 2017 년 4 월까지 출시되지 않습니다 . 페이지를 참조 하세요.
SpyderScript 2017

6

내가 찾고있는 몇 가지 공급 업체는 다음과 같습니다.

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

초점과 같은 다양한 상태의 스타일을 지정할 수도 있습니다.

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

다음과 같이 특정 전환을 수행 할 수도 있습니다.

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}

5
이것은 placholder 텍스트의 스타일을 지정하는 데 유용하지만 OP가 참조하는 깜박이는 캐럿의 스타일은 지정하지 않습니다.
craignewkirk 2017

4

다음 과 같이 -webkit-text-fill-color 와 함께 색상 속성 을 사용하면 충분합니다 .

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }
<input type="text"/>

WebKit 브라우저 (하지만 캐럿에 여전히 시스템 색상이 사용되는 iOS Safari에서는 작동하지 않음) 및 Firefox에서도 작동합니다.

-webkit-text-fill-color CSS 속성 은 텍스트 문자의 채우기 색상을 지정합니다 . 이 속성을 설정하지 않으면 color 속성의 값이 사용됩니다. MDN

따라서 이것은 text-fill-color로 텍스트 색상을 설정하고 표준 색상 속성으로 캐럿 색상을 설정한다는 것을 의미합니다. 지원되지 않는 브라우저에서 캐럿과 텍스트는 캐럿의 색상 인 동일한 색상을 갖습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.