input 박스 활성화시 테두리 색 넣기

말그대로 input 박스(ex. 로그인) 부분에 활성화가 될때 테두리 색이나 이미지등을 넣는 방법입니다.
자세한건 웹미니 로그인을 참고하시면 됩니다.

<input name="user_id" type="text" title="user id" onfocus="this.className='idOn';" onblur="if (!this.value) this.className='idOff'" class="idOff" />

CSS code

.idOff {border:1px solid #B8BCE2; background:#fff url(../images/default/login_id.gif) no-repeat 10px 3px;}
.idOn {border:1px solid #4e64f8;}

설명을 드리자면, input 박스에 마우를 클릭하면(활성화) idOn 이라는 class 가 적용되고, 비활성화 될때 idOff 가 적용되는 구조입니다. default 는 idOff 가 되는 것입니다.