在活动时围绕文本框创建发光效果

Question

将光标放在文本框中时,在文本框周围创建发光效果.例如:只需将光标放在stackoverflow.com中的搜索文本框中即可.

它因为css,但我不知道如何实现它..请帮助我.

Answer 1

该box-shadow属性不是轮廓,而是实现任何文本字段的非常流畅,美观的效果:

field {
    border-color: #dbdbdb;
}

field:focus { /* When you click on the field... */
    border-color: #6EA2DE;
    box-shadow: 0px 0px 10px #6EA2DE;
}

这是一个JSFiddle演示,我曾经让自己展示了具有过渡淡入淡出效果的上述代码.

Answer 2

虽然您在stackoverflow搜索框中观察到的效果可能是浏览器特定的(例如Google Chrome),但有一种方法可以使用CSS :focus伪类实现您想要的效果:

#foo:focus { border: 2px solid red; }

<input id="foo" type="text"/>