<p>Chrome v4는 <code>input[type=text]</code> 요소에 대한 자리 표시자 속성을 지원합니다(다른 요소도 동일할 수 있음). </p>
<p>그러나 다음 CSS는 자리 표시자 값에 대해 아무 작업도 수행하지 않습니다. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">input[자리 표시자], [자리 표시자], *[자리 표시자] {
색상: 빨간색! 중요;
}</pre>
<pre class="brush:html;toolbar:false;"><input type="text" placeholder="값"></pre>
<p><br /></p>
값은 빨간색 대신 회색으로 유지됩니다. </p>
<p><strong>자리 표시자 텍스트의 색상을 변경할 수 있는 방법이 있나요? </strong></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이렇게 하면 모든
input和textarea자리 표시자의 스타일이 지정됩니다.중요: 이 규칙을 그룹화하지 마세요. 대신 각 선택기에 대해 별도의 규칙을 만드세요(그룹의 잘못된 선택기는 전체 그룹을 무효화합니다).
구현
의사 요소, 의사 클래스, 없음의 세 가지 구현이 있습니다.
::-webkit-input-placeholder. [참조]:-moz-placeholder(a 콜론)을 사용합니다. [참조]::-moz-placeholder를 사용하지만 이전 선택기는 한동안 계속 작동합니다. [참고]:-ms-input-placeholder. [참고]::placeholder[Ref]Internet Explorer 9 이하는
placeholder속성을 전혀 지원하지 않는 반면, Opera 12 이하는 모든 자리 표시자에 대해 CSS 선택기를 지원하지 않습니다.최상의 구현 옵션에 대한 논의가 계속됩니다. 의사 요소는 shadow DOM의 실제 요소처럼 동작합니다.
input上的padding의사 요소와 동일한 배경색을 얻지 못합니다.CSS 선택기
사용자 에이전트는 알 수 없는 선택기가 있는 규칙을 무시해야 합니다. 선택기 레벨 3을 참조하세요.
그래서 브라우저마다 별도의 규칙을 만들어야 합니다. 그렇지 않으면 모든 브라우저에서 전체 그룹이 무시됩니다.