21'C 흐림
서울 강남구
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
/* input 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;}
/* textarea css */
.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;}