添加阴影，文本框的onfocus

Question

我要让这种Pinterest的影响我的登记表上 - 当用户集中在输入文本字段或文本区域，我想这个领域或区域周围有一个软阴影，像这样的：

所以我尝试以下 - 我写了一个CSS类

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

，并试图与聚焦状态添加它= “addShadow（）”，其中这是addShadow（）功能：

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是对的，box-shadow可能不适用于每一个眉毛ser，你需要添加一个浏览器特定的前缀。