현재 블로그에 사용하는 검색 입력 창의 모습입니다. 배경 색 #eee, placeholder의 글자 색 #555입니다.
마우스로 클릭하고 난 후 커서가 중앙에서 깜박이고 있으며 입력 창의 배경 색이 #fff으로 변경되고, placeholder 글자는 사라졌습니다. 편하게 입력할 준비가 된 상태입니다.
클릭을 했는 데도 placeholder 글자가 남아 있으면 입력하기 전에 먼저 지워야 하는지 고민하게 됩니다.
HTML의 <input> placeholder는 입력 창 혹은 입력 필드에 집어넣을 내용에 대한 설명을 간단하게 나열한 문구입니다.
※ 웹 브라우저의 쿠키에 저장되어 있던 예전에 입력한 검색어들과는 관련이 없습니다. 웹 브라우저로 접속한 웹 사이트에서 사용자가 기존에 입력했던 입력 단어를 입력 필드에 미리 제시하는 경우가 많습니다.
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
[출처] HTML input placeholder Attribute (w3schools.com)
HTML의 placeholder를 CSS에서 지정할 때에는 "::placeholder"의 형식으로 사용합니다.
The ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element.
[출처] CSS ::placeholder Selector (w3schools.com)
#search input {
background-color: #eee;
}
#search input::placeholder {
color: #555;
}검색 입력 필드의 배경 색과 placeholder의 문자 색을 각각 #eee와 #555로 지정한 CSS 구문입니다.
#search input {
background-color: #eee;
}
#search input::placeholder {
color: #555;
}
#search input:focus {
background-color: #fff;
}
#search input:focus::placeholder {
color: transparent;
}
":focus" 선택자(selector)를 추가한 구문을 덧붙였습니다. 마우스로 클릭하여 해당 객체에 포커스가 주어지면 배경 색과 문자 색이 변합니다. 입력 필드의 바탕이 흰색으로 변하여 입력 준비가 되었음을 알려 주며, placeholder의 글자 색은 투명(transparent)으로 지정하여 보이지 않습니다.
placeholder의 font color 대신 opacity 0으로 설정해도 됩니다.
#search input:focus::placeholder {
opacity: 0;
}
다른 객체를 클릭하여 포커스를 이동하면 기존 입력 필드의 색과 placeholder의 색은 변경 전으로 돌아옵니다.
웹 브라우저의 기종은 고려하지 않고 단순하게 방법만 설명하였습니다. 필요하면 -webkit-, -moz-, -ms- 같은 접두어(?)를 추가합니다.
보다 자세하고 세밀한 적용 방법은 아래 링크를 참고하세요.
How do I auto-hide placeholder text upon focus using css or jquery? - Stack Overflow
댓글