텍스트 상자에 포커스가있을 때이를 밝게하는 방법은 무엇입니까?

텍스트 상자에 포커스가있을 때 어떻게 밝은 효과를 낼 수 있습니까?텍스트 상자에 포커스가있을 때이를 밝게하는 방법은 무엇입니까?

Twitter의 로그인 페이지는 이미 밝게하는 텍스트 상자를 구현했습니다.

나는 그것을 구현하는 방법을 궁금해.

아이디어가 있으십니까? 순수한 CSS? 또는 일부 자바 스크립트 포커스 이벤트를 처리하고 그것과 addClass removeClass?

나는 자바 스크립트 거즈를 구현하는 것이 아니라 순수 자바 스크립트 :)으로 구현하는 jQuery를 방법을 선호

질문이 jQuery를 태그하고, 포커스 이벤트를 잡기로 간주 된 이후

출처

2011-12-15 InspiredJW

트위터 간단한 CSS3 상자 - 그림자와 함께이 구현 : 잊지 마세요

을

input:focus { 
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 0 10px rgba(255, 255, 255, 0.9) 
}

요소를 집중시킬 때 스타일 변경을 처리하는 데 필요한 Javascript가 없습니다.

출처

2011-12-15 05:35:24 Interrobang

그래서 맹목적으로 사용해서는 안되는 이유는 무엇입니까 :) 자신 만의 스타일을 넣으십시오. Twitter에서 CSS를 사용하여 포커스 선택기를 사용하는 방법을 보여 드리고 있습니다. – Interrobang

테스트를 위해 어떤 브라우저를 사용하고 있습니까? 제대로 작동하려면 최신 브라우저가 필요합니다 (IE6 ~ 8 제외) –

위의 스타일에서 시각적 선호에 맞게 색상 (rgb)을 미세 조정할 수 있습니다. 하지만 일반적으로 이것이 당신이 요구 한 것을 성취하는 가장 적절한 방법입니다. – techfoobar

, 방법에 대한 :

$("#yourTb").focus(function(){ 
    $(this).css("background-color", "yellow"); 
});

그냥

$("#yourTb").blur(function() { 
    $(this).css("background-color", "white"); 
});

출처

2011-12-15 05:35:20

이것은 jQuery는 물론이고 Javascript가없는 CSS에서도 수행 할 수 있습니다. – Interrobang

@Interrobang - 네, 할 수 있습니다. * 질문을 jQuery로 태그 지정 했으므로 부적절한 대답은 아닙니다. –

더 이상 정확하지 않습니다. Javascript는 솔루션에 많은 도움이 될뿐만 아니라 현재 프리젠 테이션 스타일을 비즈니스 로직으로 혼합하고 있습니다. CSS 속성을 맹목적으로 설정하는 대신 최소한 jQuery를 사용하여 클래스를 전환 할 수 있습니다. – Interrobang

텍스트 상자의 onFocus 이벤트에 함수를 쓸 수도 있습니다. 그 함수 안에는 텍스트 필드의 CSS 클래스 만 변경됩니다. 이 같은 것이 있습니다 <input type=Text onfocus=change()/><script>function change(){// Code to change the class}</script> 희망이 도움이됩니다.

출처

2011-12-15 06:05:40

텍스트 상자에 포커스가있을 때이를 밝게하는 방법은 무엇입니까?

답변

관련 문제