텍스트 상자에 그림자 추가

Question

내 등록 양식에 이런 종류의 Pinterest 효과를 만들고 싶습니다. 사용자가 입력 텍스트 필드 나 텍스트 영역에 집중할 때이 필드 나 영역에 주변에 부드러운 그림자가 생기길 원합니다. 이 :

그래서 나는 다음과 같은 시도 - 이것은 addShadow 어디에 내가 CSS 클래스

.inputShadow{ 
box-shadow:0 0 10px 5px #900; 
} 

을 쓴 ") (addShadow"= onfocus 및 그것을 추가하려고() 함수 :

function addShadow(){ 
    $(this).addClass("inputShadow"); 
} 

하지만 그림자가 생기지 않았습니다. 그런 다음이 시도 :

$(function(){ 
    $("input").onfocus("addClass","inputShadow"); 
}); 

또한 결과가 없습니다. 마지막으로 나는 이것을 시도했다 :

$(function(){ 
    $("input").onfocus("css","box-shadow:0 0 10px 5px #900;"); 
}); 

그러나 그것은 나에게 도움이되지 않았다.

아이디어를 얻는 방법에 대한 아이디어가 있으십니까? 감사!

Answer 1

그것을 테스트하지 않았하지만이 작업을해야 :

$(function(){ 
    $("input").on("focus",function(){ 
     $(this).addClass(".inputShadow"); 
    }); 
}); 

편집 : 다른 답변을

Answer 2

mozilla 및 chrome 브라우저에 사용하는 브라우저는 서로 다른 CSS 규칙이 있습니다.

.inputShadow { 
    -moz-box-shadow:0 0 10px 5px #900; 
    -webkit-box-shadow:0 0 10px 5px #900; 
    box-shadow:0 0 10px 5px #900; 
} 

Answer 3

이 작업을 위해 jQuery를 사용할 필요가 없습니다에 언급 한 바와 같이, 또한 브라우저 호환성을 확인, 당신 CSS 만 사용할 수 있습니다.

input:focus { 
    /* Your shadow css here */ 
    -moz-box-shadow:0 0 10px 5px #900; 
    -webkit-box-shadow:0 0 10px 5px #900; 
    box-shadow:0 0 10px 5px #900; 
} 

하지만 creminsn이 옳다면 상자 그림자가 모든 눈썹에서 작동하지 않을 수도 있습니다. ser, 브라우저에 특정한 접두사를 추가해야합니다.