목차
:placeholder-shown 예제 - placeholder 텍스트 표시 중인 요소 선택
:placeholder-shown 정의
:placeholder-shown 구문
: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 」 으로 표시됨.
주소 복사
랜덤 이동