[selector] CSS - :placeholder-shown 가상선택자 - 플레이스홀더 텍스트 표시 중인 요소 선택 (= :placeholder-shown선택자 = 플레이스홀더쇼운 선택자 = 플레이스홀더숀 선택자)

목차

1. :placeholder-shown 예제 - placeholder 텍스트 표시 중인 요소 선택
2. :placeholder-shown 정의
3. :placeholder-shown 구문
4. :placeholder-shown 예제 - placeholder 텍스트 일부 짤림 표시

:placeholder-shown 예제 - placeholder 텍스트 표시 중인 요소 선택

 

<style>

input {

  border: 1px solid black;

  padding: 3px;

}

input:placeholder-shown {

  border-color: red;

  background-color:yellow;

  color: red;

  font-style: italic;

}

</style>

<input placeholder="홈짱닷컴 Homzzang.com">

 

결과보기

:placeholder-shown 정의

 

<input>이나 <textarea> 요소의 placeholer 속성의 텍스트가 현재 표시 중인 요소 선택.

 

PS. input/textarea 요소에 텍스트 입력하는 순간 바로 선택자 적용 해제됨. 

---

 

1.

text-overflow 속성 이용하면, placeholder 텍스트 짤림 표시 가능.

(예) 홈짱닷컴 Hom... 처럼, 글자가 짤린 상태임을 표시 가능.

 

2.

IE10 이상 주요 최신브라우저 모두 지원

단, type="text" 속성 아닌 요소 (예: type="number" 또는 type="time" 속성의 요소) 경우엔 IE 지원 X

 

3.

MDN :placeholder-shown 예제 보기

 

:placeholder-shown 구문

 

:placeholder-shown {...}

 

---

[예제]

 

input:placeholder-shown {border-color:red;}

textarea:placeholder-shown {border-color:red;}

:placeholder-shown 예제 - placeholder 텍스트 일부 짤림 표시

 

<style>

input {

  border: 1px solid black;

  padding: 3px;

  width:100px;

}

input:placeholder-shown {

  border-color: red;

  background-color:yellow;

  color: red;

  font-style: italic;

  text-overflow: ellipsis;

}

</style>

<input placeholder="홈짱닷컴 Homzzang.com">

결과보기

PS. text-overflow:ellipsis; 속성 없으면, 「홈짱닷컴 Homzz」 으로 표시됨.