CSS를 사용하여 HTML5 input의 Placeholder 색상 변경

Chrome은 다음 위치에 자리 표시자 속성을 지원한다. input[type=text] 요소(아마도 역시 그럴 것이다).

그러나 다음의 CSS는 자리 표시자의 가치에 아무런 작용을 하지 않는다.

input[placeholder], [placeholder], *[placeholder] {     color: red !important; }

<input type="text" placeholder="Value">

그렇지만 Value 여전히 남아 있을 것이다 grey 대신에 red.

 

사이비원소, 사이비계급, 아무것도 구현하지 않는 세 가지각색의 구현이 있다.

• WebKit, Blink(Safari, Google Chrome, Opera 15+) 및 Microsoft Edge는 다음과 같은 유사 요소를 사용하고 있다. ::-webkit-input-placeholder. [Ref]
• Mozilla Firefox 4 - 18은 의사 클래스를 사용하고 있다. :-moz-placeholder (결장 1개). [Ref]
• Mozilla Firefox 19+가 의사 요소를 사용하고 있음: ::-moz-placeholder그러나 그 낡은 선택기는 당분간은 여전히 작동될 것이다. [Ref]
• Internet Explorer 10과 11은 사이비 클래스를 사용하고 있다. :-ms-input-placeholder. [Ref]
• 2017년 4월: 대부분의 현대 브라우저는 단순한 사이비 요소를 지원한다.

Internet Explorer 9 이하에서는 placeholder 오페라 12 이하에서는 자리 표시자에 대한 CSS 선택기를 지원하지 않지만, 속성.

최선의 이행에 대한 논의는 여전히 진행 중이다. 의사 원소는 섀도 DOM에서 실제 원소처럼 작용한다는 점에 유의하십시오. a padding …에. input 사이비 종교와 같은 배경색을 가질 수 없을 것이다.

CSS 선택기

사용자 에이전트는 선택기를 알 수 없는 규칙을 무시해야 한다. 선택기 레벨 3을 참조하십시오.

잘못된 선택기를 포함하는 선택기 그룹이 유효하지 않음

그래서 우리는 각각의 브라우저에 대해 별도의 규칙이 필요하다. 그렇지 않으면 전체 그룹이 모든 브라우저에 의해 무시될 것이다.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */     color:    #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */    color:    #909;    opacity:  1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */    color:    #909;    opacity:  1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */    color:    #909; } ::-ms-input-placeholder { /* Microsoft Edge */    color:    #909; }  ::placeholder { /* Most modern browsers support this now. */    color:    #909; }

<input placeholder="Stack Snippets are awesome!">

사용 참고 사항

• 나쁜 대비가 되지 않도록 조심해라. Firefox의 자리 표시자는 불투명도 감소와 함께 디폴트로 표시되므로 opacity: 1 여기에
• 자리 표시자 텍스트가 맞지 않으면 잘린다는 점에 유의하십시오. 입력 요소 크기: em 그리고 큰 최소 글꼴 크기 설정으로 테스트한다. 번역하는 것을 잊지 말아라: 어떤 언어들은 같은 단어를 위한 더 많은 공간을 필요로 한다.
• HTML을 지원하는 브라우저: placeholder 그러나 그에 대한 CSS 지원 없이는 (오페라처럼) 또한 테스트되어야 한다.
• 일부 브라우저에서는 일부 브라우저에 대해 추가 기본 CSS를 사용함 input 유형(타입)email, search이는 예상치 못한 방식으로 렌더링에 영향을 미칠 수 있다. 속성 사용 -webkit-appearance 그리고 -moz-appearance 그걸 바꾸기 위해서. 예:

 

Toscho의 대답 외에도 나는 CSS 속성이 지원되는 Chrome 9-10과 Safari 5 사이의 웹 키트 불일치를 알아챘다.

특히 Chrome 9 및 10은 지원하지 않음 background-color, border, text-decoration 그리고 text-transform 플레이스홀더를 스타일링할 때.

전체 교차 브라우저 비교는 다음과 같다.