将阴影添加到文本框onFocus上

Question

我想在我的注册表单上产生这种Pinterest效果 - 当用户专注于输入文本字段或文本区域时，我希望这个字段或区域周围有一个柔和的阴影，如下所示：

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

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

并尝试使用onFocus =“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

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

Answer 2

你使用什么浏览器，因为mozilla和chrome浏览器有不同的css规则。

e.g。

.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

没有测试过，但这应该有效：

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

编辑：还检查浏览器兼容性，如其他答案中所述