input스타일 roll & over배경 넣기

一現

· 14년 전 · 조회 3897 3897 · 댓글 2 2

input스타일 roll & over배경 넣기

질문 참조 : http://sir.co.kr/bbs/board.php?bo_table=pg_qa&wr_id=1354

--------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>over image on input stly</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-size:63%;
color:#000;
}
/*input*/
.input_on{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
background:url(http://www.google.com/images/nav_logo36.png) no-repeat;
}
.input_off{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
background-color:#FFF;
}
.input_move{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
background:url(http://www.google.com/images/nav_logo36.png) no-repeat;
}
.input_out{
/*height:16px;기본높이*/
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
background-color:#FFF;
}
/*form*/
ul.input_test{
margin:20px auto 0 auto;
width:500px;
list-style-type:none;
}
ul.input_test li{
width:500px;
height:22px;
margin-bottom:10px;
}
.input_test label{
float:left;
padding-right:10px;
width:100px;
line-height:22px;
text-align:right;
font-size:1.4em;
}
.input_test p{
float:left;
_margin-top:-1px;
}
.input_test span{
float:left;
padding-left:10px;
line-height:22px;
text-align:left;
font-size:1.2em;
color:#999;
}
</style>
</head>
<body>
<ul class="input_test">
<li>
<label for="inp_name">이름：</label>
<p><input id="inp_name" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>
<span>ex) 홍 길 똥?</span>
</li>
<li>
<label for="inp_email">Email：</label>
<p><input id="inp_email" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>
<span>ex) test@naver.com</span>
</li>
<li>
<label for="inp_web">home：</label>
<p><input id="inp_web" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>
<span>ex) test.com</span>
</li>
</ul>

</body>
</html>

첨부파일

index.html (2.6 KB, 51회)

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

아침바다

번호	제목	글쓴이	날짜	조회
3129	스킨또는전체작업할때 참고 하세요.. [9]	덩어리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5176
3128	jquery 1.10.x 버젼으로 올려보자 [5]	벤지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	7911
3127	상세페이지에 첨부된 이미지를 썸네일로 생성, 마우스 오버 큰 이미지 (update. 2013-07-26) [4]	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	7064
3126	get 또는 서브폴더 주소창에 안보이게 하기 [2]	고바우 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4987
3125	팝업창 쉽게 적용 하기 [6]	작살 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5869
3124	서브도메인숨기기 [2]	덩어리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5557
3123	radio 버튼 이용하여 카테고리 분류하기 [2]	서태민 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5925
3122	select 이용하여 년/월/일 작성하기 [6]	서태민 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6171
3121	관리자가 비밀글 체크하고 글쓰기할때 게시물만 적용하는 암호 사용하기 [9]	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5520
3120	접속자현황에서 IP 클릭시 정보 확인 [3]	아이다운 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5817
3119	게시물 댓글(코멘트) 날짜를 내 맘대로 변경하기 (v.2.0) [3]	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5238
3118	필터링한 아파치 로그를 테이블로 저장하여 분석하기 [4]	로빈아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4674
3117	sms4연동하여 {이름} 입력시 성빼고 이름만 출력하기 [1]	하얀바다 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4449
3116	[10원짜리 팁] 게시판 합치기 [9]	균이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	7209
3115	특정페이지로 이동하는 스크립트 [5]	덩어리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6033
3114	iframe 자동길이조절 [4]	생각하는바보 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6413
3113	영카트4, 분류를 이용한 on, off 롤 메뉴 만들기.. [5]	KIMys 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4822
3112	영카트4, 주문관리 기능 개선 [8]	KIMys 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5209
3111	영카트4, 배송일괄 처리에 상태버튼 추가하여 배송처리를 좀더 쉽게. [4]	KIMys 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3643
3110	$_GET을 일반 변수로 변경 [4]	Terrorboy 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4083

input스타일 roll & over배경 넣기

첨부파일

댓글 작성

댓글 2개

게시판 목록

그누4 팁자료실

스킨또는전체작업할때 참고 하세요.. [9]

jquery 1.10.x 버젼으로 올려보자 [5]

상세페이지에 첨부된 이미지를 썸네일로 생성, 마우스 오버 큰 이미지 (update. 2013-07-26) [4]

get 또는 서브폴더 주소창에 안보이게 하기 [2]

팝업창 쉽게 적용 하기 [6]

서브도메인숨기기 [2]

radio 버튼 이용하여 카테고리 분류하기 [2]

select 이용하여 년/월/일 작성하기 [6]

관리자가 비밀글 체크하고 글쓰기할때 게시물만 적용하는 암호 사용하기 [9]

접속자현황에서 IP 클릭시 정보 확인 [3]

게시물 댓글(코멘트) 날짜를 내 맘대로 변경하기 (v.2.0) [3]

필터링한 아파치 로그를 테이블로 저장하여 분석하기 [4]

sms4연동하여 {이름} 입력시 성빼고 이름만 출력하기 [1]

[10원짜리 팁] 게시판 합치기 [9]

특정페이지로 이동하는 스크립트 [5]

iframe 자동길이조절 [4]

영카트4, 분류를 이용한 on, off 롤 메뉴 만들기.. [5]

영카트4, 주문관리 기능 개선 [8]

영카트4, 배송일괄 처리에 상태버튼 추가하여 배송처리를 좀더 쉽게. [4]

$_GET을 일반 변수로 변경 [4]