CSS를 사용하여 HTML5 입력의 placeholder 색상 변경

질문 : CSS를 사용하여 HTML5 입력의 자리 표시 자 색상 변경

---

Chrome은 input[type=text] 요소에 대한 자리 표시 자 속성 을 지원합니다 (다른 요소도 가능).

그러나 다음 CSS는 자리 표시 자의 값에 아무런 영향을주지 않습니다.

 

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

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

그러나 Value 는 여전히 red 대신 grey 유지됩니다.

자리 표시 자 텍스트의 색상을 변경하는 방법이 있습니까?

답변

---

세 가지 다른 구현이 있습니다 : 의사 요소, 의사 클래스 및 아무것도 없습니다.

• WebKit, Blink (Safari, Google Chrome, Opera 15+) 및 Microsoft Edge는 의사 요소 : ::-webkit-input-placeholder 합니다. ^{[ 참조 ]}
• Mozilla Firefox 4 ~ 18은 의사 클래스 : :-moz-placeholder ( 콜론 1 개 )를 사용합니다. ^{[ 참조 ]}
• Mozilla Firefox 19+는 의사 요소 : ::-moz-placeholder 를 사용하지만 이전 선택기는 잠시 동안 계속 작동합니다. ^{[ 참조 ]}
• Internet Explorer 10 및 11은 의사 클래스 : :-ms-input-placeholder 합니다. ^{[ 참조 ]}
• 2017 년 4 월 : 대부분의 최신 브라우저는 간단한 의사 요소 ::placeholder ^{[ Ref ]를 지원합니다.}

Internet Explorer 9 이하에서는 placeholder 속성을 전혀 지원하지 않지만 Opera 12 이하 에서는 자리 표시 자에 대한 CSS 선택기를 지원하지 않습니다.

최상의 구현에 대한 논의는 여전히 진행 중입니다. 의사 요소는 Shadow DOM의 실제 요소처럼 작동합니다. input 의 padding 은 의사 요소와 동일한 배경색을 얻지 못합니다.

사용자 에이전트는 알 수없는 선택기가있는 규칙을 무시해야합니다. 선택기 레벨 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 에서 입력 요소의 크기를 조정하고 큰 최소 글꼴 크기 설정으로 테스트합니다. 번역을 잊지 마세요 : 일부 언어는 같은 단어에 더 많은 공간이 필요합니다.
• placeholder 대한 HTML 지원이 있지만 이에 대한 CSS 지원이없는 브라우저 (예 : Opera)도 테스트해야합니다.
• input 유형 ( email , search )에 추가 기본 CSS를 사용합니다. 이는 예기치 않은 방식으로 렌더링에 영향을 미칠 수 있습니다. -webkit-appearance 및 -moz-appearance 속성을 사용하여 변경하십시오. 예:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

출처 : https://stackoverflow.com/questions/2610497/change-a-html5-inputs-placeholder-color-with-css