jquery - 将阴影添加到文本框 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 可能不适用于所有浏览器，您需要添加特定于浏览器的前缀。