html - 激活时在文本框周围制作发光效果

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 Demo我曾经让自己展示带有过渡淡入淡出效果的上述代码。