CSS::placeholder 및 :placeholder-shown

`:placeholder-shown` CSS 의사 클래스는 현재 자리 표시자 텍스트를 표시하고 있는 `` 또는 `` 요소를 나타냅니다.

<input type="text" placeholder="some text" />

input:placeholder-shown {
  font-family: "Baloo 2", cursive;
  font-weight: bold;
  background-color: pink;
}

산출:

위 스 니펫에서

사용자가 아무 것도 입력하지 않은 경우 배경색으로 표시되는 자리 표시자가 분홍색이 됩니다

.

사용자가 무언가를 입력하면 자리 표시자가 표시되지 않고 배경색이 투명해집니다

.

📝 참고: 자리 표시자 텍스트가 없으면 :placeholder-shown가 작동하지 않습니다.

🗓 예:

<input type="text" />

input:placeholder-shown {
  background-color: pink;
}

❌ 위 스니펫이 작동하지 않습니다.

:placeholder-shown 대 ::placeholder 🔥

:placeholder-shown를 사용하여 입력 요소의 스타일을 지정할 수 있습니다.

input:placeholder-shown {
  border: 1px solid pink;
  background: yellow;
  color: blue;
}

여기에서 color: blue 를 설정했지만 작동하지 않았습니다. :placeholder-shown는 입력 자체만 대상으로 하기 때문입니다. 그러나 실제 자리 표시자 텍스트의 경우 유사 요소::placeholder를 사용해야 합니다.
::placeholder 의사 요소를 사용하여 <input> 또는 <textarea> 요소에서 자리 표시자 텍스트의 스타일을 지정할 수 있습니다.

input::placeholder {
  color: blue;
}

산출:

빈 자리 표시자에 대한 스타일을 추가하려는 경우 빈 문자열" "을 자리 표시자로 전달할 수 있습니다.

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

산출:

이제 :not 및 :placeholder-shown 두 개의 선택기를 결합하는 것이 어떻습니까?
따라서 입력이 비어 있지 않은 경우 타겟팅할 수 있으며 CSS를 적용할 수 있습니다.

<input placeholder="some text" value="Check with empty!" />

input:not(:placeholder-shown) {
  background-color: pink;
}

산출:

위 스 니펫에서

입력에 값이 있으면 background-color가 적용됩니다

.

입력이 비어 있으면 background-color 적용되지 않음

📝 참고: ::placeholder는 :not 선택기와 함께 작동하지 않습니다.

참고 🧐

MDN Doc Placeholder

MDN Doc placeholder-shown

caniuse - placeholder-shown

🌟


👩🏻‍💻 suprabha.me


🌟