입력 필드를 활성화 할 때 입력 필드를 변경하는 방법은 무엇입니까?

Question

배경색이 빨간색이라고 가정 해 보겠습니다. 입력 텍스트 필드가 빨간색으로 나타나길 원하지만, 입력 필드 내부를 클릭하여 입력하면 정규 텍스트 필드가됩니다. 입력 필드에서 활성 상태가 아닌 경우 원래 상태 (빨간색)로 돌아 가야합니다.

실제로는 꽤 자주 볼 수 있습니다. 나는 toggleclass를 사용할 줄 알았습니까?

내 입력 필드

모든 CSS3의 새로운 의사 클래스를 시도 사전

Answer 1

에 jQuery를 함께

덕분에 추가됩니다의 : 초점 선택 여기 ...

http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act

CSS 예제 :

textarea:focus, input:focus { 
    background:#f00; 
    border:3px solid #0f0; 
} 

희망, -fs

Answer 2

css class 또는 스타일 propertys로 할 수 있습니다.

CSS :

.red { 
    background-color: red; 
} 

JS :

$(function() { 
    $('input').bind('focusin', function() { 
     $(this).removeClass('red'); 
    }).bind('focusout', function() { 
     $(this).addClass('red'); 
    }).trigger('focusout'); 
});  

예 :

http://www.jsfiddle.net/NdyGJ/

Answer 3

이 시도 :

$('input').bind('focusin focusout', function() { 
    $(this).toggleClass('red'); 
}); 

은 내가 여기에 예를 만들었습니다 : 그것은 크롬, 파이어 폭스와 IE