[html] 텍스트 입력 캐럿 스타일링

Program / 글쓴이

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

답변

웹킷 브라우저를 사용하는 경우 다음 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/

답변

‘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"/>

스 니펫 확장

답변

: 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에서는 지원되지 않음). 여기 에서 현재 지원 테이블을 볼 수 있습니다 .

답변

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

::-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;}

답변

다음 과 같이 -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로 텍스트 색상을 설정하고 표준 색상 속성으로 캐럿 색상을 설정한다는 것을 의미합니다. 지원되지 않는 브라우저에서 캐럿과 텍스트는 캐럿의 색상 인 동일한 색상을 갖습니다.

답변