* CSS :
* script
* Apply
* 실 적용 예제 *
*자바스크립트 function을 태그에 직접 넣지 않고 싶을 때
제가 쓰는 방법입니다. 인풋 박스가 라벨을 덮어버리는 구조입니다.
라벨의 바깥 여백은 input의 높이에 따라 조절하세요.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
.class{ margin: 5px 9px; position: absolute; }
#input:focus { position: relative; }
* script
function overlabel(id) {
if(id.value != "") {
id.style.position = "relative";
}
else {
id.style.position = "";
}
}
* Apply
<label for="id" class="class">라벨</label>
<input type="text" id="input" onblur="overlabel(this);" />
* 실 적용 예제 *
<style type="text/css">
#outlogin .formlabel { margin: 5px 9px; position: absolute; }
#outlogin input:focus { position: relative; }
</style>
<div id="outlogin">
<label for="mb_id" class="formlabel">아이디</label>
<input type="text" id="mb_id" onblur="overlabel(this);" />
<label for="mb_password" class="formlabel">열쇠글</label>
<input type="text" id="mb_password" onblur="overlabel(this);" />
</div>
*자바스크립트 function을 태그에 직접 넣지 않고 싶을 때
document.getElementById("mb_id").onblur = function() { overlabel(this); }
document.getElementById("mb_password").onblur = function() { overlabel(this); }
제가 쓰는 방법입니다. 인풋 박스가 라벨을 덮어버리는 구조입니다.
라벨의 바깥 여백은 input의 높이에 따라 조절하세요.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
코멘트 0