0

我想在我的注册表单上制作这种 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;");
});

但这也没有帮助我。

任何想法如何使它工作？谢谢！

4

3 回答 3

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

于 2012-04-14T10:12:54.310 回答
1

您使用什么浏览器作为 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;
}
于 2012-04-14T10:07:56.483 回答
1

尚未对其进行测试，但这应该可以：

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

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

于 2012-04-14T10:08:23.700 回答