자리 표시자 색상을 설정합니다. CSS 스타일을 사용하여 자리 표시자의 도구 설명 텍스트 색상을 변경하는 방법은 무엇입니까? 자리표시자를 아름답게 숨기기

/ 기술
일반적으로 입력 및 텍스트 영역의 자리 표시자 속성은 해당 요소 내에서 작업 호출을 제공하는 데 사용됩니다. 이 노트에서는 자리 표시자의 텍스트 스타일을 지정하는 몇 가지 옵션과 해당 애니메이션 옵션에 대해 설명합니다.

따라서 자리 표시자의 텍스트 색상은 예를 들어 다음 CSS 규칙 세트를 사용하여 변경할 수 있습니다.

::-webkit-input-placeholder ( color : #c0392b ;) ::-moz-placeholder ( color : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( color : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( 색상 : #c0392b ;)

이러한 간단한 속성의 스타일을 지정하기 위한 코드 길이는 공통 표준이 없기 때문에 발생하므로 각 브라우저는 자체 방식으로 자리 표시자 스타일 지정에 대한 지원을 구현했습니다.

또한 일부는 지원되지 않습니다. CSS 속성. 정확히 지원되는 속성 목록은 다음과 같습니다.

글꼴(및 관련)
배경(및 관련)
색상
단어 간격
문자 간격
텍스트 장식
수직 정렬
텍스트 변환
선 높이
텍스트 들여쓰기
텍스트 오버플로
불투명

또한 자리 표시자 텍스트가 입력 또는 텍스트 영역 요소의 너비를 넘어 "확장"되는 경우도 있습니다(일반적인 경우). 모바일 장치). 동시에 보기 흉하게 자동으로 절단됩니다.

text-overflow: ellipsis와 같은 CSS 속성은 이 문제를 해결하는 데 도움이 되며, 자리 표시자의 잘린 영역에 미적인 줄임표를 추가합니다. 스타일에서는 다음과 같이 작성합니다.

입력 [ 자리 표시자 ] ( 텍스트 오버플로 : 줄임표 ;) 입력 ::-moz-placeholder ( 텍스트 오버플로 : 줄임표 ;) 입력 :-moz-placeholder ( 텍스트 오버플로 : 줄임표 ;) 입력 :-ms-input-placeholder ( 텍스트 오버플로: 줄임표 ;)

자리 표시자에 더 많은 미학을 추가하려면 해당 요소가 포커스를 받을 때 숨기는 효과를 추가할 수 있습니다.

애니메이션 요소를 사용한 숨기기의 몇 가지 예:

/* 초점을 맞추면 자리 표시자 투명도가 부드럽게 변경됩니다 */.input ::-webkit-input-placeholder ( 불투명도 : 1 ; 전환 : 불투명도 0.3초 완화 ;) .input ::-moz-placeholder ( 불투명도 : 1 ; 전환 : 불투명도 0.3초 완화 ;).input :-moz- 자리 표시자(불투명도: 1; 전환: 불투명도 0.3초 완화;).input:-ms-input-placeholder (불투명도: 1; 전환: 불투명도 0.3초 완화;).input(불투명도: 0; 전환: 불투명도 0.3초 완화; ) .input :focus::-moz-placeholder ( 불투명도 : 0 ; 전환 : 불투명도 0.3초 완화 ;).input :focus:-moz-placeholder ( 불투명도 : 0 ; 전환 : 불투명도 0.3초 완화 ;).input :focus :-ms-input-placeholder ( 불투명도 : 0 ; 전환 : 불투명도 0.3초 용이성 ;) /* 초점이 맞춰지면 자리 표시자를 오른쪽으로 이동합니다 */.input ::-webkit-input-placeholder ( text-indent : 0px ; 전환 : text-indent 0.3초 용이성 ;) .input ::-moz-placeholder ( text-indent : 0px ; 전환 : text-indent 0.3초 용이성 ;).input :-moz-placeholder ( text-indent : 0px ; 전환 : 텍스트 들여쓰기 0.3초 용이성 ;).input :-ms-input-placeholder ( text-indent : 0px ; 전환 : 텍스트 들여쓰기 0.3초 용이성 ;).입력 :focus::-webkit-입력-자리 표시자( 텍스트 들여쓰기 : 500px ; 전환 : 텍스트 들여쓰기 0.3초 완화 ;).input :focus::-moz-placeholder ( 텍스트 들여쓰기 : 500px ; 전환 : 텍스트 들여쓰기 0.3초 완화 ;).input :focus:- moz-placeholder ( text-indent : 500px ; 전환 : text-indent 0.3초 용이함 ;) .input :focus:-ms-input-placeholder ( text-indent : 500px ; 전환 : text-indent 0.3초 용이함 ;) /* 초점이 맞춰지면 자리 표시자를 아래로 이동합니다 */.input ::-webkit-input-placeholder ( line-height : 20px ; 전환 : line-height 0.5s 용이성 ;) .input ::-moz-placeholder ( line-height : 20px ; 전환 : line-height 0.5s 용이성 ;).input :-moz-placeholder ( line-height : 20px ; 전환 : line-height 0.5초 용이성 ;).input :-ms-input-placeholder ( line-height : 20px ; 전환 : line-height 0.5초 용이성 ;).입력 :focus::-webkit-입력-자리 표시자( line-height : 100px ; 전환 : line-height 0.5초 완화 ;).input :focus::-moz-placeholder ( line-height : 100px ; 전환 : line-height 0.5초 완화 ;).input :focus:- moz-placeholder ( line-height : 100px ; 전환 : line-height 0.5s 여유 ;).input :focus:-ms-input-placeholder ( line-height : 100px ; 전환 : line-height 0.5s 여유 ;)

여기서 마치겠습니다.

모양을 줄이고 시각적 노이즈를 줄이기 위한 노력의 일환으로 디자이너는

심하게

괜찮은

스타일 지정: 자리 표시자 색상 변경 CSS

자리 표시자 CSS를 사용하여 입력 필드 스타일 변경

심하게

다음에 대한 자리표시자 효과

자리 표시자 속성은 다음에서만 작동합니다. 그리고