집중된 캐럿의 스타일을 지정하고 싶습니다 <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;
}
답변
‘Caret’은 당신이 찾고있는 단어입니다. 나는 그것이 CSS의 이해가 아니라 브라우저 디자인의 일부라고 믿습니다.
그러나 여기에 자바 스크립트와 CSS를 사용하여 캐럿 변경 을 시뮬레이션 하는 것에 대한 흥미로운 글이 있습니다. http://www.dynamicdrive.com/forums/showthread.php?t=17450 그것은 나에게는 약간 엉망인 것 같지만 아마도 유일한 방법 일 것입니다. 임무를 완수하십시오. 기사의 요점은 다음과 같습니다.
화면 어딘가에 일반 텍스트 영역이 표시되어 사용자가 “가짜 터미널”을 클릭하면 텍스트 영역에 집중하고 사용자가 입력을 시작하면 입력 된 데이터를 텍스트 영역에 추가합니다. 우리 “터미널”에 그리고 그게 다입니다.
여기 에 데모가 있습니다.
2018 업데이트
이 새로운 CSS 속성caret-color
의 캐럿에 적용 input
또는 contenteditable
지역. 지지대가 증가하고 있지만 100 %는 아닙니다. 이것은 색상에만 영향을 미치며 너비 나 다른 유형의 모양에는 영향을주지 않습니다.
답변
: 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로 텍스트 색상을 설정하고 표준 색상 속성으로 캐럿 색상을 설정한다는 것을 의미합니다. 지원되지 않는 브라우저에서 캐럿과 텍스트는 캐럿의 색상 인 동일한 색상을 갖습니다.