로그인 박스 안에 텍스트(이미지)넣기

네이버나 다음 등 포털 사이트들의 로그인 박스를 보면 박스안에 아이디/비밀번호 이런 글씨가 들어가 있고

클릭하면 사라졌다 클릭 해제하면 다시 나오는 효과를 볼수 있습니다.

 

일단 스타일부분 입니다. 아래소스를 페이지 head와 head 사이 또는 css 파일에 넣어주세요.

id_blur / id_focus 부분이 아이디 input 효과

pw_blur / pw_focus 부분이 비밀번호 input 효과입니다.

 

<style>
ol,ul,li {list-style:none;}
.id_blur { border:#ddd 1px solid; background: transparent url(bg.gif) no-repeat; font-size:11px; font-family:돋움; width: 125px; height: 15px; line-height:14px; background-color:#f9f9f9;} 
.id_focus { border:#ddd 1px solid; background-color:#f9f9f9; color:#9e9e9e; font-size:11px; font-family:돋움; width: 125px; height: 15px; line-height:15px; } 
.pw_blur {border:#ddd 1px solid; background: transparent url(bg2.gif) no-repeat; font-size:11px; font-family:돋움; width: 125px; height: 15px; line-height:15px; background-color:#f9f9f9;} 
.pw_focus { border:#ddd 1px solid; background-color:#f9f9f9; color:#9e9e9e; width: 125px; height: 15px; font-size:10px; line-height:15px;}
</style>

페이지에 들어갈 소스입니다.

원하는 위치에 이 소스를 넣어주시면 됩니다.

 

<ul >
  <li>
    <input type="text" name="txtUserId" onFocus="this.className='id_focus'" onBlur="if ( this.value == '' ) { this.className='id_blur' }"  class='id_blur' />
  </li>
  <li>
    <input type="password" name="txtUserPw" onFocus="this.className='pw_focus'" onBlur="if ( this.value == '' ) { this.className='pw_blur' }"  class='pw_blur' />
  </li>
</ul>

[출처] HSBN 향사발 (http://blog.naver.com/shadk18/10125136905)