 |
|
| |
|
  |
11년 전
|
.gif) 여러가지 방법이 있겠지만 저는 아래의 방법을 사용합니다.
인풋박스의 스타일 클래스를 보통박스와 포커스가 들어간박스를 미리 생성해둡니다.
jquery를 이용하여 인풋박스에 커서가 맞춰지면 미리 생성해둔 스타일 클래스로 바뀌는 원리입니다.
HTML
<input type="text" class="inputbox" style="width:200px;" />
<textarea rows="10" cols="85" class="textbox" style="width:500px; height:200px;" ></textarea>
jQuery
$(function() {
// input 테두리
$('input.inputbox').focus(function() {
$(this).addClass('focusbox');
}).blur(function() {
$(this).removeClass('focusbox');
});
// textarea 테두리
$('textarea.textbox').focus(function() {
$(this).addClass('focustextbox');
}).blur(function() {
$(this).removeClass('focustextbox');
});
});
CSS
.inputbox,.focusbox {float:left; margin:0; height:auto; font-size:12px; color:#666;}.inputbox {padding:4px 1px 3px 5px; border-top:1px solid #b5b5b5; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #b5b5b5;}.focusbox {padding:3px 0 2px 4px; border:2px solid #23adb2;}.textbox,.focustextbox {margin:0; width:539px; height:100px;}.textbox {padding:4px 1px 3px 5px; border-top:1px solid #b5b5b5; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #b5b5b5;}.focustextbox {padding:3px 0 2px 4px; border:2px solid #23adb2;}
|
|
 추천 : 651 |
추천
목록
|
|
| |
|
