질문이라 죄송합니다;;;;
input style 태그로 bg로 이미지를 하나 넣어놓고, 마우스 over했을때 다른이미지가 나오게끔 버튼형식을 만들순없을까요? onfocus를 보다가 생각이 나서;;; 아직 초보라 진도가 안나가네요 ㅠ;;
아시는분 이게 가능한걸까요 ㅎ;?
댓글 5개
14년 전
<!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>
<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>
14년 전
一現 님의 아주 명확한 답변. 친절한 쏘스... 와우~
근데 제생각은 기본적으로 제공되는 input 등은 브라우저나 사람들 개인 pc 에 따라
특성을 타는 경우가 종종 있더군요 해서 기본적으로 제공하는 것들은 그냥 css 나 자스 처리 없이 그냥
나뚜는게 속 편하더군요
근데 제생각은 기본적으로 제공되는 input 등은 브라우저나 사람들 개인 pc 에 따라
특성을 타는 경우가 종종 있더군요 해서 기본적으로 제공하는 것들은 그냥 css 나 자스 처리 없이 그냥
나뚜는게 속 편하더군요
ParkBang
14년 전
네 저도 input 에 bg 넣어서 버튼 만들면 브라우져마다 다르게 뜨는 경우가 있어서 못쓰겠더라고요
14년 전
와우! 완전 감사합니다 ㅋㅋㅋㅋㅋㅋ
14년 전
와우! ㅎㅎ
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3530 | 14년 전 | 915 | ||
| 3529 | 14년 전 | 1135 | ||
| 3528 |
 넓은마인드 |
14년 전 | 1340 | |
| 3527 | 14년 전 | 1190 | ||
| 3526 |
 JMS007 |
14년 전 | 894 | |
| 3525 | 14년 전 | 1186 | ||
| 3524 | 14년 전 | 1403 | ||
| 3523 | 14년 전 | 1373 | ||
| 3522 | 14년 전 | 920 | ||
| 3521 | 14년 전 | 2099 | ||
| 3520 |
넓은마인드 |
14년 전 | 437 | |
| 3519 | 14년 전 | 1058 | ||
| 3518 | 14년 전 | 903 | ||
| 3517 |
다케미카코
|
14년 전 | 749 | |
| 3516 |
넓은마인드 |
14년 전 | 1241 | |
| 3515 |
NS미디어
|
14년 전 | 1676 | |
| 3514 | 14년 전 | 1032 | ||
| 3513 |
FreeZone
|
14년 전 | 824 | |
| 3512 |
넓은마인드 |
14년 전 | 828 | |
| 3511 | 14년 전 | 1092 | ||
| 3510 | 14년 전 | 1381 | ||
| 3509 | 14년 전 | 1478 | ||
| 3508 | 14년 전 | 552 | ||
| 3507 | 14년 전 | 1100 | ||
| 3506 |
 익명닉네임 |
14년 전 | 989 | |
| 3505 | 14년 전 | 1010 | ||
| 3504 | 14년 전 | 1734 | ||
| 3503 |
letsgolee
|
14년 전 | 1497 | |
| 3502 | 14년 전 | 1381 | ||
| 3501 | 14년 전 | 1138 | ||
| 3500 | 14년 전 | 1153 | ||
| 3499 | 14년 전 | 1767 | ||
| 3498 |
리눅스초보100
|
14년 전 | 799 | |
| 3497 |
네비플러스
|
14년 전 | 578 | |
| 3496 |
도와주세요
|
14년 전 | 843 | |
| 3495 | 14년 전 | 819 | ||
| 3494 | 14년 전 | 1321 | ||
| 3493 | 14년 전 | 1580 | ||
| 3492 | 14년 전 | 1337 | ||
| 3491 | 14년 전 | 950 | ||
| 3490 | 14년 전 | 1020 | ||
| 3489 | 14년 전 | 1106 | ||
| 3488 | 14년 전 | 2844 | ||
| 3487 |
JMoon
|
14년 전 | 1031 | |
| 3486 | 14년 전 | 1693 | ||
| 3485 | 14년 전 | 1312 | ||
| 3484 | 14년 전 | 955 | ||
| 3483 | 14년 전 | 2243 | ||
| 3482 |
photolate
|
14년 전 | 2661 | |
| 3481 | 14년 전 | 767 | ||
| 3480 | 14년 전 | 1005 | ||
| 3479 | 14년 전 | 1890 | ||
| 3478 |
 연후하은아빠 |
14년 전 | 2277 | |
| 3477 | 14년 전 | 1338 | ||
| 3476 | 14년 전 | 1473 | ||
| 3475 | 14년 전 | 810 | ||
| 3474 | 14년 전 | 1123 | ||
| 3473 | 14년 전 | 1122 | ||
| 3472 | 14년 전 | 1885 | ||
| 3471 | 14년 전 | 1149 | ||
| 3470 | 14년 전 | 822 | ||
| 3469 | 14년 전 | 917 | ||
| 3468 | 14년 전 | 224 | ||
| 3467 | 14년 전 | 968 | ||
| 3466 | 14년 전 | 879 | ||
| 3465 | 14년 전 | 896 | ||
| 3464 |
스카이워커
|
14년 전 | 1431 | |
| 3463 | 14년 전 | 2311 | ||
| 3462 | 14년 전 | 1364 | ||
| 3461 | 14년 전 | 1142 | ||
| 3460 |
New악마
|
14년 전 | 1521 | |
| 3459 | 14년 전 | 774 | ||
| 3458 | 14년 전 | 779 | ||
| 3457 | 14년 전 | 1035 | ||
| 3456 | 14년 전 | 1262 | ||
| 3455 | 14년 전 | 891 | ||
| 3454 | 14년 전 | 1178 | ||
| 3453 | 14년 전 | 1807 | ||
| 3452 | 14년 전 | 789 | ||
| 3451 | 14년 전 | 1125 | ||
| 3450 | 14년 전 | 1142 | ||
| 3449 | 14년 전 | 846 | ||
| 3448 | 14년 전 | 859 | ||
| 3447 | 14년 전 | 1244 | ||
| 3446 | 14년 전 | 1729 | ||
| 3445 | 14년 전 | 1634 | ||
| 3444 | 14년 전 | 1540 | ||
| 3443 |
 Terrorboy |
14년 전 | 920 | |
| 3442 | 14년 전 | 1111 | ||
| 3441 | 14년 전 | 943 | ||
| 3440 |
바인플러스
|
14년 전 | 826 | |
| 3439 | 14년 전 | 2020 | ||
| 3438 | 14년 전 | 1289 | ||
| 3437 |
New악마
|
14년 전 | 1231 | |
| 3436 |
카프카07
|
14년 전 | 1295 | |
| 3435 |
Terrorboy |
14년 전 | 1521 | |
| 3434 |
Terrorboy |
14년 전 | 882 | |
| 3433 | 14년 전 | 1660 | ||
| 3432 | 14년 전 | 3947 | ||
| 3431 | 14년 전 | 1885 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기