구글 Chrome Placeholder 예제

mirinae.maru

■ 구글 크롬에서 Placeholder를 표현하는 예제이다. 

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" 
	content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<style>
.search {
  border: 2px double #7F9DB9; /* 입력칸 border */
  color: #8e8b8b; /* 입력 텍스트 색상 */
  font-size: 50px;	/* 텍스트 크기 */
  font-style: italic;
  width : 500px;	/* 입력칸 크기 */
  height : 100px;   /* 입력칸 높이 */

}
.search::-webkit-input-placeholder {
  color: #84dc0a;		/* placeholder 색상 */
  font-style: italic;
  text-align:center;	/* placeholder 정렬 */
  background-image: url("./searchicon.png"); 
  background-repeat: no-repeat;		/* 아이콘을 한번만 보여줌 */
  background-position: 348px 25px; /* 화면상 아이콘 위치 */
}
</style>
</head>
<body align="center">
  <input type="text" size="30" 
  	maxlength="30" class="search" 
  	placeholder="search">
  </div>
</body>
</html>
placehoder가 보여지는 초기 상태
텍스트 입력중